element tree 默认选中某个节点,
最近想实现多选框关联的功能，但是有一个问题是element的el-tree多选树(复选框)的父子节点没有关联。本文将介绍解决方案，大家来看看。
属性check-strictly
公文提供严格的属性检查。当显示复选框时，严格遵循父子是否互不相关。默认值为false。
而这个属性的意思是：默认false，父子关联。有如下现象及问题：。
1.当您通过函数设置校验节点时，只要父节点被校验，子节点就会被校验，即使设置的校验列表中没有这样的子节点。
2.当您单击复选框时，如果您单击父节点，它的所有子节点将跟随父节点的更改。如果您单击一个子节点，则当某些子节点被选中时，父节点将被半选，当所有子节点被选中时，父节点将被选中，当所有子节点被取消选中时，父节点将不被选中。设置true，严格的遵循父子不互相关联。
1.通过函数设置被勾选的节点时，通过设置该节点是否存在于勾选列表中来严格判断其是否被勾选。
2.当你点击复选框时，无论你点击哪个节点，都只会改变当前节点的选中状态，不存在半选状态。
系统的角色菜单控制的问题
问题来了。当控制系统的角色菜单时，需要满足以下条件：
1.按函数设置被检查节点时，需要通过设置该节点是否存在于被检查列表中来确定是否被检查，即检查父节点而不一定检查所有子节点。
2.当复选框被点击时，如果父节点被点击，它的所有子节点将统一跟随父节点的变化。
3.当复选框被点击时，如果子节点被点击，父节点在子节点被部分选中时会被半选，父节点在所有子节点被选中时会被选中，父节点在所有子节点未被选中时不会被选中。
需求思考：
一、check-strictly=false，行不通
根据需要满足的条件，显然接近于将check-strict设置为false，所以从check-strict=false父子关系的关联基础出发，需要解决的问题有：
所有未被检查的子节点对应的父节点被更改为半检查状态，但是对文档的搜索长时间无果。
只有getHalfCheckedKeys和getHalfCheckedNodes未设置为半检查。
二、check-strictly=true，试一试
您只能尝试将check-strict设置为true。从check-strict=true开始，严格遵守父子互不关联，要解决的问题是：
1.当复选框被点击时，如果父节点被点击，它的所有子节点将一致地跟随父节点的变化。
2.当复选框被点击时，如果子节点被点击，父节点在子节点被部分选中时会被半选，父节点在所有子节点被选中时会被选中，父节点在所有子节点未被选中时不会被选中。
但是当父子关系不是严格意义上的关系时，点击父子节点不会导致半选状态，也无法通过函数设置半选状态，简化解决问题也是无奈之举：
1.单击复选框时，如果状态为选中:
1.1.其所有父节点(父节点、父节点的父节点等)统一跟随当前节点，更改为选中。
1.2.其下所有子节点统一跟随父节点，改为选中。
2.点击该复选框，如果状态为未选中，则该复选框下的所有子节点将随父节点一起变为未选中。
解决代码：
1、el-tree标签属性
El-tree ref= tree :data= tree menus :props= multi props :show-checkbox= true
node-key= menuId highlight-current:expand-on-click-node= false
:default-checked-keys= check edid :check-strict= true @ check= click deal
Node-key:每个树节点作为唯一标识符使用的属性，整个树应该是唯一的。标识节点的唯一键名。
Default-checked-keys=checkedId:初始化相应的el-tree多选树组件时，选择默认的选中Id。
check-strict=true:你是否严格遵循父子互不相关的惯例？
Check:单击复选框时触发的方法。
道具：配置选项，详见下图。
而根据后台返回的，for: props="multiProps "，我的conf
孩子：“孩子”，
标签:“名称”，
已禁用：this.isDisabled
}
将子字段标识为子节点名，默认情况下将子字段标识为子节点，将标签标识为节点名。
2、el-tree组件有变化时给多选树重新赋值
已更新(){
//设置多选树的默认值
这个。$ refs . tree . setcheckedkeys(this . checked id)
},
CheckedId是选中节点的数组，不区分父节点和子节点。
3、复选框点击时的特殊处理
clickDeal (currentObj，treeStatus) {
//用于：当父节点和子节点严格不相关时，父节点检查变更时，会通知子节点同步变更，从而实现单向关联。
selected=tree status . checked keys . index of(current obj . menuid)//-1未选择。
//已选择
如果(选中！==-1) {
//只要选择了父节点，就选择了子节点。
this.selectedParent(currentObj)
//统一处理的子节点处于相同的检查状态。
this.uniteChildSame(currentObj，true)
}否则{
//未选择所有处理子节点。
if (currentObj.childs.length！==0) {
this.uniteChildSame(currentObj，false)
}
}
},
//统一处理的子节点处于相同的检查状态。
uniteChildSame (treeList，isSelected) {
这个。$ refs . tree . set checked(treelist . menuid，isSelected)
for(设I=0；I treelist . childs . length；i ) {
this . unitechildsame(treelist . childs[I]，isSelected)
}
},
//选择统一处理的父节点。
selectedParent (currentObj) {
让currentNode=this。$refs.tree.getNode(currentObj)
if (currentNode.parent.key！==未定义){
这个。$ refs . tree . set checked(current node . parent，true)
this . selected parent(current node . parent)
}
},
关于元素的el-tree多选树(复选框)的父子节点的关联与不关联的这篇文章到此为止。关于Element的El-tree多选树非关联的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。