属性check-strictly
官方文档提供属性check-strictly，在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。
而此属性的意思是：
默认false，父子关联。有如下现象及问题：
1、当你通过函数设置勾选节点的时候，只要父节点被勾选子节点必会勾选上，即便设置勾选的list中无此子节点。
2、当你点击勾选复选框时候，若点击父节点，其下子节点全部统一跟随父节点变化；若点击子节点，子节点部分勾选时父节点处于半选状态，子节点全部勾选时父节点选中，子节点全部不勾选时父节点未选中。
设置true，严格的遵循父子不互相关联。
1、当你通过函数设置勾选节点的时候，严格通过设置勾选的list中有无此节点来断定是否勾选。
2、当你点击勾选复选框时候，无论点击的哪个节点只会改变当前节点的勾选状态，不存在半选状态。
系统的角色菜单控制的问题
问题来了，在系统的角色菜单控制的时候，需要满足以下条件：
1、当通过函数设置勾选节点的时候，需要严格通过设置勾选的list中有无此节点来断定是否勾选，即勾选父节点而不一定勾选全部子节点。
2、当点击勾选复选框时候，若点击父节点，其下子节点全部统一跟随父节点变化。
3、当点击勾选复选框时候，若点击子节点，子节点部分勾选时父节点处于半选状态，子节点全部勾选时父节点选中，子节点全部不勾选时父节点未选中。
需求思考：
一、check-strictly=false，行不通
按照需要满足的条件，明显靠近将check-strictly设置为false，于是从check-strictly=false父子互相关联的基础入手，需要解决的问题就是：
将尚未全部勾选的子节点对应的父节点改为半勾选状态，但是查找文档良久无果。
只有gethalfcheckedkeys和gethalfcheckednodes，并没有设置成半勾选。
二、check-strictly=true，试一试
只能试一下将check-strictly设置为true，从check-strictly=true严格的遵循父子不互相关联入手，需要解决的问题就是：
1、当点击勾选复选框时候，若点击父节点，其下子节点全部统一跟随父节点变化。
2、当点击勾选复选框时候，若点击子节点，子节点部分勾选时父节点处于半选状态，子节点全部勾选时父节点选中，子节点全部不勾选时父节点未选中。
而在严格的父子不互相关联时，点击父子节点不会出现半选状态，也无法通过函数设置半选状态，无奈简化解决问题：
1、当点击勾选复选框时候，若状态为 选中 ：
1.1、其所有 父节点 （父节点、父节点的父节点以此类推）全部统一跟随当前节点变化为 选中 。
1.2、其下 子节点 全部统一跟随父节点变化为 选中 。
2、当点击勾选复选框时候，若状态为 未选中 ，其下 子节点 全部统一跟随父节点变化为 未选中 。
解决代码：
1、el-tree标签属性
<el-tree ref="tree" :data="treemenus" :props="multiprops" :show-checkbox="true" node-key="menuid" highlight-current :expand-on-click-node="false" :default-checked-keys="checkedid" :check-strictly="true" @check="clickdeal">
node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。标识节点唯一的键值名称。
default-checked-keys = checkedid：对应el-tree多选树组件初始化时默认选中id
check-strictly = true：是否严格的遵循父子不互相关联的做法
check：当复选框被点击的时候触发的方法
props：配置选项，具体看下图。
而根据后台的返回，针对:props=“multiprops”，我的配置为：
multiprops: {
children: 'childs',
label: 'name',
disabled: this.isdisabled
}
识别childs字段为子节点name为节点名称，而默认是识别children为子节点label为节点名称。
2、el-tree组件有变化时给多选树重新赋值
updated () {
// 给多选树设置默认值
this.$refs.tree.setcheckedkeys(this.checkedid)
},
checkedid为勾选节点的数组，不区分父子节点。
3、复选框点击时的特殊处理
clickdeal (currentobj, treestatus) {
// 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
let selected = treestatus.checkedkeys.indexof(currentobj.menuid) // -1未选中
// 选中
if (selected !== -1) {
// 子节点只要被选中父节点就被选中
this.selectedparent(currentobj)
// 统一处理子节点为相同的勾选状态
this.unitechildsame(currentobj, true)
} else {
// 未选中 处理子节点全部未选中
if (currentobj.childs.length !== 0) {
this.unitechildsame(currentobj, false)
}
}
},
// 统一处理子节点为相同的勾选状态
unitechildsame (treelist, isselected) {
this.$refs.tree.setchecked(treelist.menuid, isselected)
for (let i = 0; i < treelist.childs.length; i++) {
this.unitechildsame(treelist.childs[i], isselected)
}
},
// 统一处理父节点为选中
selectedparent (currentobj) {
let currentnode = this.$refs.tree.getnode(currentobj)
if (currentnode.parent.key !== undefined) {
this.$refs.tree.setchecked(currentnode.parent, true)
this.selectedparent(currentnode.parent)
}
},
到此这篇关于element的el-tree多选树(复选框)父子节点关联不关联的文章就介绍到这了,更多相关element el-tree多选树不关联内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！