el-tree父节点状态影响其子节点,子节点的选中状态不影响其父节点
效果图
代码实现
<el-tree
ref="placeTree"
class="filter-tree tree check_tree"
:data="placeChoose"
show-checkbox
node-key="id"
default-expand-all
check-strictly
@check="checkPlace"
:props="defaultProps">
</el-tree>
checkPlace(data, nodes) {
if (nodes.checkedKeys.includes(data.id)) {
let children = data.children;
let checkedKeys = this.$refs.placeTree.getCheckedKeys();//选中的keys
if (children.length) {
for (let i = 0; i < children.length; i++) {
if (! checkedKeys.includes(children[i].id)) {
checkedKeys.push(children[i].id);
}
if (children[i].children) {
for (let j = 0; j < children[i].children.length; j++) {
if (! checkedKeys.includes(children[i].children[j].id)) {
checkedKeys.push(children[i].children[j].id);
}
}
}
}
console.log("选中的id===>", checkedKeys)
this.$refs.placeTree.setCheckedKeys(checkedKeys);
}
} else {
let children = data.children;
let checkedKeys = this.$refs.placeTree.getCheckedKeys();
for (let i = 0; i < children.length; i++) {
let pIndex = checkedKeys.indexOf(children[i].id);
if (pIndex != -1) {
checkedKeys.splice(pIndex,1);
}
if (children[i].children) {
for (let j = 0; j < children[i].children.length; j++) {
let cIndex = checkedKeys.indexOf(children[i].children[j].id);
if (cIndex != -1) {
checkedKeys.splice(cIndex,1);
}
}
}
}
console.log("checkedKeys===>",checkedKeys);
this.$refs.placeTree.setCheckedKeys(checkedKeys);
}
}