Element UI 使用Tree组件设置节点勾选问题
问题分析
1.设置:tree复选框 check-strictly = false(默认) 父子关联:
选中父级,勾选所有子选项;取消父级选中,同时取消子选项勾选
选中子选项,父选项变为半选中状态,如果勾选所有子选项,父选项为选中状态
2.设置:tree复选框 check-strictly = true 父子无关联,出现:
父级的选中和取消选中,都不会对子选项的状态有任何的影响
子选项的选中和取消,都不会对父选项的状态有任何的影响
当默认1问题时, 后端发过来是 父节点id时候会联动选中下面的所有子节点问题?我们只需要发来的子节点id勾选父节点自动联动,不使用父节点id设置勾选
解决方案
通过后端发过来勾选id数组去循环遍历通过id获取当前节点 判断当前节点是否是子节点 如果是子节点就 勾选 , 否则,不勾选
<el-tree :data="data" ref="menuTree" :checkStrictly="checkStrictly" node-key="id" />
data: [
{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
},
{
id: 2,
label: '一级 2',
children: [
{
id: 3,
label: '2-1-1'
},
{
id: 5,
label: '2-1-2'
}
]
}
]
重点这段代码解决
[2, 9].forEach((item, index) => {
const node = this.$refs.menuTree.getNode(item)
console.log(node)
if (node.isLeaf) {
this.$refs.menuTree.setChecked(node, true)
}
})