Merge pull request #114 from liub1934/main

feat:表格列支持draggable配置是否能拖拽

Author: jekip

src/components/Table/src/components/settings/ColumnSetting.vue

@@ -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 {

src/components/Table/src/types/table.ts

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