Merge pull request #114 from liub1934/main

feat:表格列支持draggable配置是否能拖拽
This commit is contained in:
Ah jung
2022-04-01 09:44:52 +08:00
committed by GitHub
2 changed files with 28 additions and 3 deletions

View File

@@ -25,13 +25,26 @@
</template>
<div class="table-toolbar-inner">
<n-checkbox-group v-model:value="checkList" @update:value="onChange">
<Draggable v-model="columnsList" animation="300" item-key="key" @end="draggableEnd">
<Draggable
v-model="columnsList"
animation="300"
item-key="key"
filter=".no-draggable"
:move="onMove"
@end="draggableEnd"
>
<template #item="{ element }">
<div
class="table-toolbar-inner-checkbox"
:class="{ 'table-toolbar-inner-checkbox-dark': getDarkTheme === true }"
:class="{
'table-toolbar-inner-checkbox-dark': getDarkTheme === true,
'no-draggable': element.draggable === false,
}"
>
<span class="drag-icon">
<span
class="drag-icon"
:class="{ 'drag-icon-hidden': element.draggable === false }"
>
<n-icon size="18">
<DragOutlined />
</n-icon>
@@ -211,6 +224,11 @@
}
}
function onMove(e) {
if (e.draggedContext.element.draggable === false) return false;
return true;
}
//固定
function fixedColumn(item, fixed) {
if (!state.checkList.includes(item.key)) return;
@@ -232,6 +250,7 @@
onChange,
onCheckAll,
onSelection,
onMove,
resetColumns,
fixedColumn,
draggableEnd,
@@ -275,6 +294,10 @@
display: inline-flex;
margin-right: 8px;
cursor: move;
&-hidden {
visibility: hidden;
cursor: default;
}
}
.fixed-item {

View File

@@ -14,6 +14,8 @@ export interface BasicColumn extends TableBaseColumn {
auth?: string[];
// 业务控制是否显示
ifShow?: boolean | ((column: BasicColumn) => boolean);
// 控制是否支持拖拽,默认支持
draggable?: boolean;
}
export interface TableActionType {