el-tree拖拽排序

el-tree组件提供了drag-and-drop功能来实现拖拽排序。具体步骤如下：

1. 在el-tree组件上设置属性：draggable="true"。

2. 监听el-tree组件的node-drag-start、node-drag-enter、node-drag-leave和node-drop事件。

3. 在node-drag-start事件中设置拖拽节点的数据和样式。

4. 在node-drag-enter、node-drag-leave事件中设置拖拽节点进入和离开目标节点时的样式。

5. 在node-drop事件中根据拖拽节点和目标节点的位置关系，更新el-tree组件的数据源。

以下是一个简单的示例代码：

<el-tree :data="treeData" :draggable="true" @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drop="handleDrop">
</el-tree>

methods: {
  handleDragStart(draggingNode, event) {
    // 设置拖拽节点的数据和样式
    event.dataTransfer.setData('text/plain', JSON.stringify(draggingNode.data));
    event.dataTransfer.effectAllowed = 'move';
    event.target.style.opacity = 0.5;
  },
  handleDragEnter(draggingNode, dropNode, event) {
    // 设置拖拽节点进入目标节点时的样式
    dropNode.highlight = true;
  },
  handleDragLeave(draggingNode, dropNode, event) {
    // 设置拖拽节点离开目标节点时的样式
    dropNode.highlight = false;
  },
  handleDrop(draggingNode, dropNode, dropType, event) {
    // 根据拖拽节点和目标节点的位置关系，更新el-tree组件的数据源
    const draggingData = JSON.parse(event.dataTransfer.getData('text/plain'));
    const dropData = dropNode.data;
    const dropIndex = dropNode.index;
    const draggingIndex = draggingNode.index;
    const parentData = dropNode.parent.data;
    parentData.children.splice(draggingIndex, 1);
    if (dropType === 'before') {
      parentData.children.splice(dropIndex, 0, draggingData);
    } else if (dropType === 'after') {
      parentData.children.splice(dropIndex + 1, 0, draggingData);
    } else {
      dropData.children = dropData.children || [];
      dropData.children.push(draggingData);
    }
  }
}