elementui的el-tree多选树（复选框）⽗⼦节点关联不关联的问题，选中当前节
点，。。。
element ui的el-tree多选树(复选框)⽗⼦节点关联不关联的问题，选中当前节点，他的⼦节点和⽗节点是否被选中，⾮常详细
属性check-strictly
官⽅⽂档提供属性check-strictly，在显⽰复选框的情况下，是否严格的遵循⽗⼦不互相关联的做法，默认为 fal。
⽽此属性的意思是：
**默认fal，⽗⼦关联。**有如下现象及问题：
1、当你通过函数设置勾选节点的时候，只要⽗节点被勾选⼦节点必会勾选上，即便设置勾选的list中⽆此⼦节点。
2、当你点击勾选复选框时候，若点击⽗节点，其下⼦节点全部统⼀跟随⽗节点变化；若点击⼦节点，⼦
节点部分勾选时⽗节点处于半选状态，⼦节点全部勾选时⽗节点选中，⼦节点全部不勾选时⽗节点未选中。
设置true，严格的遵循⽗⼦不互相关联。
1、当你通过函数设置勾选节点的时候，严格通过设置勾选的list中有⽆此节点来断定是否勾选。
2、当你点击勾选复选框时候，⽆论点击的哪个节点只会改变当前节点的勾选状态，不存在半选状态。
系统的⾓⾊菜单控制的问题
问题来了，在系统的⾓⾊菜单控制的时候，需要满⾜以下条件：
1、当通过函数设置勾选节点的时候，需要严格通过设置勾选的list中有⽆此节点来断定是否勾选，即勾选⽗节点⽽不⼀定勾选全部⼦节点。
2、当点击勾选复选框时候，若点击⽗节点，其下⼦节点全部统⼀跟随⽗节点变化。
3、当点击勾选复选框时候，若点击⼦节点，⼦节点部分勾选时⽗节点处于半选状态，⼦节点全部勾选时⽗节点选中，⼦节点全部不勾选时⽗节点未选中。
1.要求⽗⼦之间严格不关联，选中当前节点，他的所有⼦节点都被选中
2.要求⽗⼦之间严格不关联，选中当前节点，他的所有⽗节点和⼦节点都被选中
需求思考：
⼀、check-strictly=fal，⾏不通
按照需要满⾜的条件，明显靠近将check-strictly设置为fal，于是从check-strictly=fal⽗⼦互相关联的基础⼊⼿，需要解决的问题就是：
将尚未全部勾选的⼦节点对应的⽗节点改为半勾选状态，但是查找⽂档良久⽆果。
只有getHalfCheckedKeys和getHalfCheckedNodes，并没有设置成半勾选。
⼆、check-strictly=true，试⼀试
明确的目标只能试⼀下将check-strictly设置为true，从check-strictly=true严格的遵循⽗⼦不互相关联⼊⼿，需要解决的问题就是：
1、当点击勾选复选框时候，若点击⽗节点，其下⼦节点全部统⼀跟随⽗节点变化。
摩诃般若波罗蜜多2、当点击勾选复选框时候，若点击⼦节点，⼦节点部分勾选时⽗节点处于半选状态，⼦节点全部勾选时⽗节点选中，⼦节点全部不勾选时⽗节点未选中。
0x00000050
⽽在严格的⽗⼦不互相关联时，点击⽗⼦节点不会出现半选状态，也⽆法通过函数设置半选状态，⽆奈简化解决问题：
1、当点击勾选复选框时候，若状态为 选中 ：
1.1、其所有 ⽗节点 （⽗节点、⽗节点的⽗节点以此类推）全部统⼀跟随当前节点变化为 选中 。
1.2、其下 ⼦节点 全部统⼀跟随⽗节点变化为 选中 。
2、当点击勾选复选框时候，若状态为 未选中 ，其下 ⼦节点 全部统⼀跟随⽗节点变化为 未选中 。
解决代码：
1、el-tree标签属性
<el-tree
ref="tree"
:data="data"
:props="defaultProps"
:show-checkbox="true"
node-key="id"
电脑不能播放视频highlight-current
:expand-on-click-node="fal"
:default-checked-keys="checkedId"
:check-strictly="true"
@check="nodeClick">
</el-tree>
：data，是你要展⽰的数据
node-key：每个树节点⽤来作为唯⼀标识的属性，整棵树应该是唯⼀的。标识节点唯⼀的键值名称。default-checked-keys = checkedId：对应el-tree多选树组件初始化时默认选中ID
check-strictly = true：是否严格的遵循⽗⼦不互相关联的做法
check：当复选框被点击的时候触发的⽅法
props：配置选项，具体看下图。配置数据库字段名与这⼏个属性⼀致
⽽根据后台的返回，针对:props=“defaultProps”，我的配置为：
defaultProps: {
children: 'children',
label: 'categoryName'
disabled: this.isDisabled
}
其他属性：
data() {
return {
data: [],
checkedId:"",
defaultProps: {
children: 'children',多道程序设计
label: 'categoryName'
},
};
},
2、el-tree组件有变化时给多选树重新赋值
updated () {
// 给多选树设置默认值
this.$CheckedKeys(this.checkedId)
},
checkedId为勾选节点的数组，不区分⽗⼦节点。
3、重点：复选框点击时的特殊处理
nodeClick (currentObj, treeStatus) {
console.log(currentObj)
console.log("=========")
console.log(treeStatus)
// ⽤于：⽗⼦节点严格互不关联时，⽗节点勾选变化时通知⼦节点同步变化，实现单向关联。 let lected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中,>=0为选中
console.log(lected)
// 选中
if (lected !== -1) {
// ⼦节点只要被选中⽗节点就被选中(需要选中⽗节点时候调⽤此⽅法)
//this.lectedParent(currentObj)
// 统⼀处理⼦节点为相同的勾选状态
this.uniteChildSame(currentObj, true)
} el {
// 未选中处理⼦节点全部未选中
if (currentObj.children.length !== 0) {
this.uniteChildSame(currentObj, fal)
}
}
},
孤傲的烟圈// 统⼀处理⼦节点为相同的勾选状态
uniteChildSame (treeList, isSelected) {
console.log("aaaaaaaaaaaaa")
console.log(treeList);
this.$Checked(treeList.id, isSelected)
for (let i = 0; i < treeList.children.length; i++) {
this.uniteChildSame(treeList.children[i], isSelected)
}
},
// 统⼀处理⽗节点为选中
曹丕曹植
lectedParent (currentObj) {
let currentNode = this.$Node(currentObj)
if (currentNode.parent.key !== undefined) {
this.$Checked(currentNode.parent, true)
this.lectedParent(currentNode.parent)
操场的英语单词
}
},
原⽂链接：blog.csdn/Beam007/article/details/87858291
