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组件的数据源。 以下是一个简单的示例代码： ```html <el-tree :data="treeData" :draggable="true" @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter" @node-drag-leave="handleDragLeave" @node-drop="handleDrop"> </el-tree> ``` ```javascript 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); } } } ```

### 如何在 `el-tree` 组件中实现拖拽节点排序 为了实现在 `el-tree` 中的节点拖拽排序功能，可以利用该组件内置的支持属性和事件处理函数来完成这一需求。下面是一个具体的实例说明。 #### HTML 部分 定义了一个带有特定属性配置的 `<el-tree>` 标签用于渲染树形结构的数据，并启用了 `draggable` 属性以便支持节点之间的拖动操作[^2]： ```html <el-tree ref="treeCategory" :data="treeData" :default-expand-all='true' :expand-on-click-node="false" show-checkbox node-key="id" :default-checked-keys="ids" @check-change="nodeChange" check-strictly draggable @node-drop="handleDrop"> </el-tree> ``` #### JavaScript 方法部分 当发生拖放动作结束时会触发 `@node-drop` 事件，在此方法内部可以根据实际业务逻辑调整被移动后的节点位置并更新状态。这里提供了一种简单的回调函数模板作为参考: ```javascript methods: { handleDrop(draggingNode, dropNode, dropType, ev){ console.log('draggingNode:', draggingNode); console.log('dropNode:', dropNode); console.log('dropType:', dropType); // before / after / inner let curPid = null; switch(dropType){ case 'before': curPid = dropNode.parent.data.id || 0; break; case 'after': curPid = dropNode.parent.data.id || 0; break; default: curPid = dropNode.data.id; } this.$set(this.treeData, draggingNode.data.pid, curPid); // 更新服务器端数据... }, } ``` 上述代码片段展示了如何监听 `el-tree` 的 `node-drop` 事件以及相应的响应方式。通过判断 `dropType` 参数的不同取值（即放置目标相对于源项的位置），可进一步决定新父级 ID (`curPid`) 应设置为何值；最后调用 Vue 提供的状态管理工具 `$set()` 来同步前端显示的变化[^1]。