全局通用的 Vue El-Tree 拖拽排序功能实现方法

引言
本文将介绍如何在 Vue El-Tree 组件中实现拖拽排序功能，并提供了一个通用的实现方法。该方法以尽可能的少改动数据为优先，并兼容多种场景。

El-Tree 组件介绍
El-Tree 是 Element UI 提供的一个树形组件，它可以用来展示和操作树形数据。El-Tree 组件支持拖拽排序功能，但官方文档并没有提供详细的实现方法。本文将介绍如何实现 El-Tree 组件的拖拽排序功能。

通用实现方法

1. 首先，我们需要在 El-Tree 组件中添加一个 draggable 属性，并将它的值设置为 true。这将使 El-Tree 组件支持拖拽功能。

<el-tree :data="data" draggable></el-tree>

2. 接下来的步骤是实现节点的拖拽排序。为了实现这一点，我们需要监听 El-Tree 组件的 node-drag-start 和 node-drag-end 事件。node-drag-start 事件在拖拽开始时触发，而 node-drag-end 事件在拖拽结束时触发。

<el-tree :data="data" draggable
  @node-drag-start="handleNodeDragStart"
  @node-drag-end="handleNodeDragEnd"></el-tree>

3. 在 handleNodeDragStart 方法中，我们需要记录下被拖拽节点的 ID。

handleNodeDragStart(data) {
  this.draggedNodeId = data.node.id;
}

4. 在 handleNodeDragEnd 方法中，我们需要将被拖拽节点移动到新的位置。

handleNodeDragEnd(data) {
  const droppedNodeId = data.node.id;
  const draggedNode = this.data.find(node => node.id === this.draggedNodeId);
  const droppedNode = this.data.find(node => node.id === droppedNodeId);

  // 将被拖拽节点移动到新的位置
  draggedNode.pid = droppedNode.pid;
  draggedNode.order = droppedNode.order + 1;
}

5. 最后，我们需要在 El-Tree 组件中实现数据更新。我们可以使用 watch 方法来监听 data 属性的变化，并在数据发生变化时更新 El-Tree 组件。

watch: {
  data(newData) {
    this.$refs.tree.setData(newData);
  }
}

兼容多种场景
上面的实现方法可以兼容多种场景。例如，如果我们需要在 El-Tree 组件中实现多级拖拽排序，我们可以使用嵌套的 El-Tree 组件来实现。

<el-tree :data="data" draggable>
  <template slot-scope="{ node }">
    <el-tree :data="node.children" draggable></el-tree>
  </template>
</el-tree>

如果我们需要在 El-Tree 组件中实现跨级拖拽排序，我们可以使用 node-drop 事件来实现。

<el-tree :data="data" draggable
  @node-drop="handleNodeDrop"></el-tree>

在 handleNodeDrop 方法中，我们需要将被拖拽节点移动到新的位置。

handleNodeDrop(data) {
  const droppedNodeId = data.node.id;
  const draggedNode = this.data.find(node => node.id === this.draggedNodeId);
  const droppedNode = this.data.find(node => node.id === droppedNodeId);

  // 将被拖拽节点移动到新的位置
  draggedNode.pid = droppedNode.pid;
  draggedNode.order = droppedNode.order + 1;
}

总结
本文介绍了如何在 Vue El-Tree 组件中实现拖拽排序功能，并提供了一个通用的实现方法。该方法以尽可能的少改动数据为优先，并兼容多种场景。