效果:
解决办法:
check-strictly:在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false。
1、设置check-strictly 是一个变量checkStrictly,默认值是false
<el-tree
:data="rolesTree"
show-checkbox
default-expand-all
ref="rolestree"
node-key="Id"
:default-checked-keys="defaultCheckedNode"
:check-strictly="checkStrictly"
:expand-on-click-node="false"
highlight-current
:props="defaultProps"
@check="handleNodeCheck">
</el-tree>
checkStrictly:false,
2、获取数据后,
getRolesTree (params) {
role.getRolesTree(params).then(res => {
this.rolesTree = res.data.Data;
this.checkStrictly = true, //给树节点赋值之前,先设置为true
this.$nextTick(() => {
setTimeout(()=>{
//渲染
this.defaultCheckedNode = this.getArray(this.rolesTree, true, []);
this.$refs.rolestree.setCheckedNodes(this.defaultCheckedNode); //给树节点赋值
this.checkStrictly = false; //赋值完成后设置为false
},0)
})
})
},
getArray (data, name, lst) {
var tempArr = lst, _this = this;
data.map(item => {
if (item.Disabled == name) {
tempArr.push(item.Id);
if (!!item.Children && (typeof item.Children) == "object") {
_this.getArray(item.Children, name, tempArr);
}
} else {
if (!!item.Children && (typeof item.Children) == "object") {
_this.getArray(item.Children, name, tempArr);
}
}
})
return tempArr
},