vue3 拖动树形表格

Vue3 中的拖动树形表格通常涉及到一个叫做 "Sortable" 或者 "Vuedraggable" 这样的第三方库，它们允许你在 Vue 组件中实现列表或数据结构的拖放功能。对于树形结构，需要额外处理节点间的父子关系以及递归调整。

1. 首先，安装所需的库，比如 `@Sortablejs/vue` 或者 `vuedraggable`：

   npm install @sortablejs/core @sortablejs/vue3

2. 在组件中导入并使用这些库：

   import Sortable from '@sortablejs/core';
   import SortableVue from '@sortablejs/vue3';

3. 定义一个树形数据结构，并绑定到组件的属性上：

   data() {
     return {
       treeData: [
         { id: 1, name: '父节点1', children: [] },
         // ... 更多节点
       ]
     }
   }

4. 初始化 Sortable 对象，在每个节点元素上应用 `SortableVue`：

   mounted() {
     this.treeData.forEach(node => {
       if (node.children.length) {
         SortableVue.create({
           el: node.children,
           group: '__tree__',
           draggable: '.draggable',
         });
       }
     });
   }

5. 当拖动发生时，通过事件处理器更新树形结构的父子关系，保持数据一致：

   methods: {
     onSortEnd(event) {
       const draggedNode = event.newIndex;
       const newNodeParentId = event.parentId;
       
       // 更新被移动节点的父节点、兄弟节点位置等
       moveNode(treeData, draggedNode, newNodeParentId);
     }
   }

6. 根据需要编写 `moveNode` 函数来处理节点的移动操作，这通常包括查找目标位置、交换数组位置等。