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

View File

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