elementUi版本是^2.15.9的重新写一份代码
时间: 2024-04-16 15:27:07 浏览: 14
当使用 ElementUI 版本为 ^2.15.9 时,你可以按照如下方式重新编写代码来实现 el-tree 的拖拽交换节点位置:
```html
<template>
<el-tree :data="treeData" :props="treeProps" @node-drag-end="handleNodeDragEnd"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
// 树的数据结构
],
treeProps: {
// 树的属性配置
}
}
},
methods: {
handleNodeDragEnd(event) {
const dropNode = event.data;
const oldParent = event.oldParent;
const oldIndex = oldParent.children.indexOf(dropNode);
// 如果有新的父节点,表示移动到了其他节点下面
if (event.parent) {
const newParent = event.parent;
const newIndex = newParent.children.indexOf(dropNode);
// 从旧父节点删除节点
oldParent.children.splice(oldIndex, 1);
// 在新父节点的指定位置插入节点
newParent.children.splice(newIndex, 0, dropNode);
} else {
// 如果没有新的父节点,表示移动到了根节点下面
this.treeData.splice(oldIndex, 1);
this.treeData.splice(event.newIndex, 0, dropNode);
}
}
}
}
</script>
```
在这个示例中,我们重新编写了 handleNodeDragEnd 方法,以适应 ElementUI 版本为 ^2.15.9。我们通过解构赋值获取了拖拽结束事件的相关参数,包括拖拽的节点、旧父节点和新父节点等。根据这些参数,我们使用 splice 方法来交换节点位置。
请确保树的数据结构和属性配置与你实际使用的相匹配,并根据需要进行相应的调整。