elmentplus树组件实现所有节点只能选择一个
时间: 2024-10-06 19:03:06 浏览: 23
Element Plus 的 Tree 组件通常用于构建树形数据结构,如果需要限制每个节点只能有一个被选中,你可以通过监听节点的 `@selection-change` 或者 `@node-click` 事件来实现这个功能。下面是一个简单的示例:
```html
<template>
<el-tree
:data="treeData"
node-key="id"
:props="defaultProps"
@selection-change="handleSelectionChange"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: ... // 树形数据数组
};
},
props: {
defaultProps: { // 配置项,比如节点的默认展开状态等
children: '__children__', // 节点子元素键名
},
},
methods: {
handleSelectionChange(selection) {
if (selection.length > 1) {
this.$message.error('每次只能选择一个节点');
selection.pop(); // 移除最后一个被选中的节点
}
},
},
};
</script>
```
在这个例子中,每当节点的选择发生改变时,`handleSelectionChange` 方法会被触发。如果当前选中的节点超过一个,就会显示错误信息并移除最后一个被选中的节点。
阅读全文