Vue Element-UI树组件实现跨级别拖拽功能

在Vue Element UI库中实现一个树形组件的任意级别拖拽功能，本文将详细介绍如何结合`el-tree`组件以及自定义事件处理来实现这一功能。首先，你需要确保`el-tree`组件具备了基础的可拖拽属性，如`draggable`设置为允许拖放，并通过`@node-drop`事件监听拖拽节点的放置。 `allowDrop`方法是你定制的判断逻辑，它接收三个参数：`draggingNode`（正在拖动的节点）、`dropNode`（目标节点）和`type`（拖拽类型，可能为'prev'、'after'或'inner'）。在这个示例中，你已经移除了对同级拖拽的限制，转而支持任意级别的拖拽。具体判断条件是，如果两个节点具有相同的`aboveId`（假设这是父级ID），则可以进行拖拽。如果`type`是'prev'，表示拖拽到前面；'after'表示后面；而'inner'则表示在当前节点内部。 `sort`方法在拖拽完成后会被调用，用于实际的数据排序。它打印出`draggingNode`和`dropNode`的信息，然后根据`aboveId`的匹配情况更新节点的位置。这里没有展示完整的排序逻辑，但你应该会在此处根据`type`更新`catalogList`数组，确保数据结构正确反映拖拽操作。 为了完整实现这个功能，你需要确保以下几点： 1. 初始化`catalogList`，包含树形数据结构，包括`id`、`level`、`aboveId`等字段。 2. 定义`defaultProps`，可能包含节点展开/折叠的默认属性。 3. 实现`loadNode`函数，负责异步加载子节点。 4. `renderContent`函数用于渲染每个节点的HTML内容，可能与`node-key`一起决定节点的显示内容。 5. 添加`@node-click`事件处理器，以便在节点被点击时执行相应操作。 通过以上步骤，你可以创建一个灵活的、支持任意级别拖拽的Vue Element UI树形组件，使得用户可以根据需要轻松地调整节点的层级关系。记住，代码中的`console.log`语句可以作为调试工具，但在生产环境中应移除或替换为实际的数据操作。