VXE-Table 树形表格与拖拽排序实现文档VxeTable 树形结构与拖拽配置详解 [vxeTable拖拽](Vxe

VxeTable 树形结构与拖拽配置详解

一、树形结构的使用

在 dragView.vue 文件中，通过 vxe-table 组件实现了树形结构的数据展示。树形结构的实现主要依赖于 tree-config 属性的配置以及数据格式的特定要求。

（一）数据格式要求

树形结构的数据需要满足一定的格式，以便 vxe-table 能够正确地构建层级关系。具体要求如下：

唯一标识字段：每条数据需要有一个唯一的标识字段，用于区分不同的节点。在示例中，使用 id 字段作为唯一标识。
父级标识字段：用于表示当前节点的父节点。在示例中，使用 parentId 字段来指定父节点的 id。如果 parentId 为 null，则表示该节点为根节点。
子节点字段（可选）：如果数据中包含子节点的数组，可以使用 children 字段来存储。但在示例中，通过懒加载的方式动态获取子节点，因此未直接在数据中定义 children 字段。

示例数据格式如下：

const tableData = ref([
  {
    id: 10000,
    parentId: null,
    name: "Test1",
    type: "mp3",
    size: 1024,
    date: "2020-08-01",
  },
  {
    id: 10050,
    parentId: null,
    name: "Test2",
    type: "mp4",
    size: 0,
    date: "2021-04-01",
  },
  {
    id: 24300,
    parentId: 10050,
    name: "Test3",
    type: "avi",
    size: 1024,
    date: "2020-03-01",
  },
  // ...
]);

（二）`tree-config` 配置

tree-config 属性用于配置树形结构的相关选项。在示例中，tree-config 的配置如下：

const treeConfig = reactive({
  transform: true,
  rowField: "id",
  parentField: "parentId",
  lazy: true,
  hasChild: "hasChild",
  loadMethod({ row }) {
    // 异步加载子节点
    return fetchChildListApi(row);
  },
});

transform：设置为 true，表示开启树形结构的转换，将扁平化的数据转换为树形结构。
rowField：指定唯一标识字段的名称，这里为 "id"。
parentField：指定父级标识字段的名称，这里为 "parentId"。
lazy：设置为 true，表示开启懒加载，即在需要时动态加载子节点。
hasChild：指定用于标识节点是否有子节点的字段名称，这里为 "hasChild"。在数据中，通过 getTableData 方法动态设置 hasChild 字段的值。
loadMethod：定义加载子节点的方法。当节点被展开时，会调用此方法来异步获取子节点数据。在示例中，通过 fetchChildListApi 函数模拟后台请求，返回子节点数据。

二、拖拽事件配置

dragView.vue 文件中还涉及拖拽功能的配置，主要通过 row-drag-config 属性来实现。

（一）`row-drag-config` 配置

const rowDragConfig = reactive({
  isCrossDrag: true,
  isSelfToChildDrag: true,
  isToChildDrag: true,
  showGuidesStatus: false,
  dragEndMethod: ({ newRow, oldRow }) => {
    // 获取新旧行的父级ID
    const newParentId = newRow.parentId;
    const oldParentId = oldRow.parentId;
    if (newParentId !== oldParentId) {
      ElMessage({
        message: "不允许拖拽到其他父级",
        type: "warning",
      });
      return false;
    }
    return true;
  },
});

isCrossDrag：设置为 true，允许跨行拖拽。
isSelfToChildDrag：设置为 true，允许将节点拖拽到自身作为子节点。
isToChildDrag：设置为 true，允许将节点拖拽到其他节点作为子节点。
showGuidesStatus：设置为 false，不显示拖拽引导线。
dragEndMethod：定义拖拽结束时的回调方法。在示例中，通过比较新旧行的 parentId 来判断是否允许拖拽到其他父级。如果 newParentId 与 oldParentId 不同，则弹出警告消息，并返回 false 表示禁止拖拽；否则返回 true 表示允许拖拽。

三、总结

通过上述配置，dragView.vue 文件中的 vxe-table 组件实现了树形结构的数据展示，并且支持拖拽功能，同时禁止了跨父级的拖拽操作。这种配置方式使得表格能够灵活地展示和操作具有层级关系的数据，满足了复杂数据展示和交互的需求。（这里的数据结构是一维数组，多维数组的数据结构好像是不行的，也可以转换成这样的以为数据结构根据parentId和父级的id对应即可）

VXE-Table 树形表格与拖拽排序实现文档