帮我写一段vue代码。需求是利用el-tree,父子节点中只能选一个
时间: 2024-03-12 15:45:19 浏览: 68
好的,根据你的需求,可以通过监听el-tree的节点选中事件来实现父子节点中只能选一个的效果,具体代码如下:
```vue
<template>
<el-tree
:data="treeData"
:props="defaultProps"
:node-key="nodeKey"
:default-expand-all="true"
@node-click="handleNodeClick"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: 'Parent 1',
children: [
{
id: 2,
label: 'Child 1-1'
},
{
id: 3,
label: 'Child 1-2'
}
]
},
{
id: 4,
label: 'Parent 2',
children: [
{
id: 5,
label: 'Child 2-1'
},
{
id: 6,
label: 'Child 2-2'
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
},
nodeKey: 'id'
}
},
methods: {
handleNodeClick(data, node) {
// 获取当前节点的父节点和所有子节点
const siblings = node.parent ? node.parent.childNodes : this.$refs.tree.store.root.childNodes
// 取消所有兄弟节点的选中状态
siblings.forEach((child) => {
if (child !== node) {
child.setChecked(false)
}
})
}
}
}
</script>
```
在这个示例中,我们监听了el-tree的节点选中事件,通过获取当前节点的父节点和所有子节点,然后取消所有兄弟节点的选中状态,从而实现了父子节点中只能选一个的效果。
需要注意的是,因为el-tree使用了异步加载,所以在取消兄弟节点的选中状态时,需要判断父节点是否存在。如果存在,则获取其子节点;否则,获取el-tree的根节点。
阅读全文