效果:
解决方法
<el-tree
:data="systemTree"
show-checkbox
node-key="code"
:check-strictly="systemNodeFlag"
@check-change="handelCheckChange"
:props="defaultProps" ref="systemTree">
</el-tree>
1.设置check-strictly 是一个变量systemNodeFlag 默认值是false
2.拿到接口数据后:
this.systemNodeFlag = true //重点:给数节点赋值之前 先设置为true
this.$nextTick(() => {
this.checkedSystem//拿到接口数据,筛选出选中状态的数据添加到数组中
this.$refs.systemTree.setCheckedKeys(this.checkedSystem) //给树节点赋值
this.checkStrictly = false //重点: 赋值完成后 设置为false
})
名词解释:
很多同学拿到数据后只是进行了setCheckedNodes赋值,所以会出现父节点和子节点都被选中都情况
check-strictly:在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false