Merge pull request #683 from wangmerry/develop_test

feat: 手动控制表格拖拽顺序，demo添加
Tencent · Mar 31, 2022 · b1a4301 · b1a4301
2 parents 2d609ec + 7938e27
commit b1a4301
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/examples/table/demos/drag-col-sort.vue b/examples/table/demos/drag-col-sort.vue
@@ -80,7 +80,14 @@ export default {
       currentIndex, current, targetIndex, target, currentData, e,
     }) {
       console.log('交换行', currentIndex, current, targetIndex, target, currentData, e);
+      // 为保证数据和 DOM 一致，此处必须赋值
       this.data = currentData;
+
+      // 如果希望组件数据和 DOM 元素完全受控，请使用以下方法，示例代码，有效勿删
+      // this.data = [];
+      // this.$nextTick(() => {
+      //    this.data = currentData;
+      // })
     },
   },
 };

diff --git a/examples/table/demos/drag-sort.vue b/examples/table/demos/drag-sort.vue
@@ -73,7 +73,14 @@ export default {
       currentIndex, current, targetIndex, target, currentData, e,
     }) {
       console.log('重新排序', currentIndex, current, targetIndex, target, currentData, e);
+      // 为保证数据和 DOM 一致，此处必须赋值
       this.data = currentData;
+
+      // 如果希望组件数据和 DOM 元素完全受控，请使用以下方法，示例代码，有效勿删
+      // this.data = [];
+      // this.$nextTick(() => {
+      //    this.data = currentData;
+      // })
     },
   },
 };

diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts
@@ -1,24 +1,20 @@
 // 表格 行拖拽 + 列拖拽功能
 
-import { ref, toRefs, SetupContext } from '@vue/composition-api';
+import { SetupContext, computed, toRefs } from '@vue/composition-api';
 import { SortableEvent } from 'sortablejs';
 import { TdPrimaryTableProps } from '../type';
 import { TargetDom } from '../interface';
 import { setSortableConfig } from '../utils';
 import useClassName from './useClassName';
 
 export default function useDragSort(props: TdPrimaryTableProps, context: SetupContext) {
-  const {
-    sortOnRowDraggable, dragSort, data, columns,
-  } = toRefs(props);
+  const { sortOnRowDraggable, dragSort, columns } = toRefs(props);
   // 判断是否有拖拽列
-  const dragCol = columns.value.find((item) => item.colKey === 'drag');
+  const dragCol = computed(() => columns.value.find((item) => item.colKey === 'drag'));
   // 行拖拽判断条件
-  const isRowDraggable = ref(sortOnRowDraggable || dragSort.value === 'row');
+  const isRowDraggable = computed(() => sortOnRowDraggable.value || dragSort.value === 'row');
   // 列拖拽判断条件
-  const isColDraggable = ref(dragSort.value === 'drag-col' && !!dragCol);
-
-  const innerData = ref(data.value);
+  const isColDraggable = computed(() => dragSort.value === 'drag-col' && !!dragCol.value);
 
   const { tableDraggableClasses } = useClassName();
 
@@ -31,30 +27,30 @@ export default function useDragSort(props: TdPrimaryTableProps, context: SetupCo
     const { handle, ghost } = tableDraggableClasses;
     const baseOptions = {
       animation: 150,
-      ghostClass: ghost, // 放置占位符的类名
+      // 放置占位符的类名
+      ghostClass: ghost,
       onEnd(evt: SortableEvent) {
         const { oldIndex, newIndex } = evt;
-        const newData = [].concat(innerData.value);
+        const newData = [...props.data];
         if (newIndex - oldIndex > 0) {
           newData.splice(newIndex + 1, 0, newData[oldIndex]);
           newData.splice(oldIndex, 1);
         } else {
           newData.splice(newIndex, 0, newData[oldIndex]);
           newData.splice(oldIndex + 1, 1);
         }
+
         const params = {
           currentIndex: evt.oldIndex,
-          current: innerData.value[evt.oldIndex],
+          current: props.data[evt.oldIndex],
           targetIndex: evt.newIndex,
-          target: innerData.value[evt.newIndex],
+          target: props.data[evt.newIndex],
           currentData: newData,
           e: evt,
         };
         props.onDragSort?.(params);
         // Vue3 ignore next line
         context.emit('drag-sort', params);
-
-        innerData.value = newData;
       },
     };
     // 注册拖拽事件