Update ColumnSetting.vue (#1451)

修复配置项中，拖拽后点击重置按钮 table 恢复还原，但拖拽列表并未还原bug

Update ColumnSetting.vue (#1451)
修复配置项中，拖拽后点击重置按钮 table 恢复还原，但拖拽列表并未还原bug
Jiang · GitHub
1 parent 23b5538e
Showing 1 changed file with 11 additions and 4 deletions
src/components/Table/src/components/settings/ColumnSetting.vue
@@ -267,7 +267,9 @@
         });
         setColumns(checkedList);
       }
-
+      
+      let sortable = null;
+      let sortableOrder = [];
       // reset columns
       function reset() {
         state.checkedList = [...state.defaultCheckList];
@@ -275,6 +277,7 @@
         plainOptions.value = unref(cachePlainOptions);
         plainSortOptions.value = unref(cachePlainOptions);
         setColumns(table.getCacheColumns());
+        sortable.sort(sortableOrder);
       }
  
       // Open the pop-up window for drag and drop initialization
@@ -286,8 +289,11 @@
           const el = columnListEl.$el as any;
           if (!el) return;
           // Drag and drop sort
-          const { initSortable } = useSortable(el, {
-            handle: '.table-column-drag-icon',
+          sortable = Sortable.create(unref(el), {
+            animation: 500,
+            delay: 400,
+            delayOnTouchOnly: true,
+            handle: '.table-column-drag-icon ',
             onEnd: (evt) => {
               const { oldIndex, newIndex } = evt;
               if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
@@ -308,7 +314,8 @@
               setColumns(columns);
             },
           });
-          initSortable();
+          // 记录原始order 序列
+          sortableOrder = sortable.toArray();
           inited = true;
         });
       }