工作遇到新需求如下:
1. 点击勾选时,与平时实现效果一样
2. 子级取消选中,父级选中效果不变
身为菜狗的我为解决需求,贯彻CV大法,百度搜索一番,查到的答案“千篇两律”,应该是我的CV大法技术不佳,这两个答案都不能很好地实现需求,为此,我将两篇答案结合在了一起,只要按需修改node-key即可CV实现。
思路:自定义勾选后实现的效果,选中时,则一并选中该节点的子节点与父节点,取消时,则一并取消子节点,但不处理父节点。
重点:
el-tree部分:
check-strictly = true , 切断父级与子级之间的关系
check = "handleCheck" , 自定义勾选效果
methods部分:
handleCheck, 自定义勾选效果方法,实现上文所说的两点需求
selectChildren,选中子级方法
parentNodesChange,递归处理父级,如果选中的节点存在父级,则勾选父级
实现效果以及代码如下:
el-tree 取消子级,父子效果不变
<template>
<div>
<el-tree
ref="tree"
:check-strictly="true" @check="handleCheck"
:data="data"
show-checkbox
node-key="id"
:props="defaultProps">
</el-tree>
</div>
</template>
<script>
export default {
name: 'TreeDemo',
data() {
return {
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: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleCheck (data, { checkedKeys }) {
if (checkedKeys.includes(data.id)) { // 选中
let node = this.$refs.tree.getNode(data.id) // getNode(node-key)
this.selectChildren(data, true) // 选中子节点
this.parentNodesChange(node) // 选中父节点
} else {
this.selectChildren(data, false) // 取消子节点
}
},
selectChildren (data, checked) {
data && data.children && data.children.map(item => {
this.$refs.tree.setChecked(item.id, checked);
if (data.children) {
this.selectChildren(item, checked)
}
});
},
// 父级递归
parentNodesChange (node) {
// console.log(node);
if (node.parent) {
for (let key in node) {
if (key == 'id') {
// console.log(node[key]);
this.$refs.tree.setChecked(node, true);
}
}
if (node.parent && node.id !== 0) {
this.parentNodesChange(node.parent)
}
}
},
}
}
</script>
<style>
</style>