el-tree 实现选择父节点时候,不让所有子节点全部选择实现单个选择
时间: 2024-12-15 16:28:11 浏览: 26
在Element UI的`el-tree`组件中,如果你想要实现当用户点击父节点时只选择当前父节点,而不是使其所有的子节点都被选中,你可以通过监听`node-click`事件并在其中控制状态。这里是一个简单的思路:
1. 首先,在`el-tree`的数据结构中,给每个节点添加一个表示是否被选中的属性,比如`selected`。
2. 在渲染节点时,根据节点的`selected`属性显示相应的选中样式。
3. 当`node-click`事件触发时,遍历当前节点的所有子节点并设置它们的`selected`属性为`false`,然后仅将点击的节点的`selected`属性设置为`true`。
示例代码片段如下:
```javascript
<template>
<el-tree
:data="treeData"
node-key="id"
@node-click="handleNodeClick"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [], // 根据实际数据填充
};
},
methods: {
handleNodeClick(node) {
// 遍历当前节点的子节点,取消他们的选中状态
node.children.forEach(child => (child.selected = false));
// 更新当前点击节点的选择状态
node.selected = true;
},
},
};
</script>
```
阅读全文