el-tree :allow-drop="allowDrop" 拖拽后保留勾选状态
时间: 2024-09-06 19:06:46 浏览: 41
vue elementui tree 任意级别拖拽功能代码
`el-tree` 是 Element UI 中的一个树形组件,它允许你通过 `allow-drop` 属性开启拖拽功能。当设置 `allow-drop` 为 `true` 时,用户可以将节点拖动到其他位置。如果你希望在拖拽操作后,被拖动节点的选中状态能够被保留下来,你需要在组件内部处理这个逻辑。
通常,Vue 的 `el-tree` 组件提供了一个钩子,如 `onDrop` 或者 `drop` 事件处理器,你可以在这个事件触发时,检查被放置的目标节点,然后更新它们的状态(包括选中状态)。例如:
```javascript
<template>
<el-tree
:data="treeData"
:allow-drop="allowDrop"
@drop="handleDrop"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: ...,
allowDrop: true,
};
},
methods: {
handleDrop(node, dragNode) {
// 遍历目标节点的子节点,判断是否包含被拖放的节点
node.children.some(child => child === dragNode);
// 如果找到了,则设置选中状态
if (child) {
child.checked = dragNode.checked;
}
},
},
};
</script>
```
在这里,`handleDrop` 函数会检查拖放到的节点是否是某个子节点,并相应地更新它的选中状态。
阅读全文