Element UI是一套基于Vue.js的桌面端组件库，提供了丰富的UI组件，其中包括Tree（树）组件。
在一些需求中，我们可能会遇到这样的场景：父节点选中时，要求子节点不选中；父节点取消选择时，子节点也要自动取消。下面就是基于Element UI提供的Tree组件的实现方式。
1. 安装Element UI
首先，我们需要先安装Element UI组件库。在命令行中运行以下命令：
npm install element-ui --save
2. 引入Element UI
在Vue的入口文件（例如main.js）中引入Element UI：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3. 使用Tree组件
然后，在Vue组件中，我们可以直接使用Element UI提供的Tree组件来实现父节点选中时子节点不选中，父节点取消时子节点自动取消的效果。
<template>
<div>
<el-tree
:data="data"
node-key="id"
:default-expand-all="true"
@check-change="handleCheckChange"
></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '父节点1',
children: [
{
id: 2,
label: '子节点1',
disabled: true, // 控制子节点是否可选
},
{
id: 3,
label: '子节点2',
},
],
},
{
id: 4,
label: '父节点2',
children: [
{
id: 5,
label: '子节点3',
},
{
id: 6,
label: '子节点4',
},
],
},
],
};
},
methods: {
handleCheckChange(data, checked) {
if (checked) {
// 当父节点选中时，将所有子节点的选中状态设置为false
data.children.forEach((child) => {
this.$set(child, 'checked', false);
});
} else {
// 当父节点取消时，将所有子节点的选中状态设置为false
data.children.forEach((child) => {
this.$set(child, 'checked', false);
});
}
},
},
};
</script>
通过设置子节点的disabled属性，我们可以控制子节点的可选状态。在父节点的@check-change事件处理函数中，我们可以根据父节点的选中状态来设置子节点的选中状态。当父节点选中时，将所有子节点的选中状态设置为false；当父节点取消选中时，将所有子节点的选中状态设置为false。
4. 运行效果
运行项目后，你会看到如下效果：
- 当选中父节点时，子节点不会同步选中。
- 当取消选中父节点时，子节点会自动取消选中。
通过Element UI的Tree组件，我们可以方便地实现父节点选中时子节点不选中，父节点取消时子节点自动取消的效果。这在一些多层级的数据展示中非常实用。
如果你对Element UI的Tree组件还有更多的需求，可以参考Element UI官方文档。
本文来自极简博客，作者：开发者故事集，转载请注明原文链接：Element UI Tree实现父节点选中时子节点不选中，父节点取消时子节点自动取消
