el-tree选择子级默认选中父级,选中父级不选中子级
el-tree,vue
·
<template>
<div class="eltree">
<span>el-tree选择子级默认选中父级,选中父级不选中子级</span>
<el-tree
ref="tree"
:data="treeData"
show-checkbox
node-key="id"
:props="defaultProps"
:check-strictly="true"
:default-checked-keys="selectTreeArr"
@check="checkChange"
>
</el-tree>
</div>
</template>
<script>
export default {
name: "eltree",
data() {
return {
treeData: [
{
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'
},
selectTreeArr: [], //选中的
};
},
methods: {
checkChange(data) {
const node = this.$refs.tree.getNode(data.id);
this.setNode(node);
},
setNode(node) {
console.log(node, "node");
if (node.checked) {
//如果当前是选中checkbox,则递归设置父节点和父父节点++选中
this.setParentNode(node);
} else {
//当前是取消选中,将所有子节点都取消选中
this.setChildenNode(node);
}
},
setParentNode(node) {
if (node.parent) {
for (const key in node) {
if (key === "parent") {
node[key].checked = true;
this.setParentNode(node[key]);
}
}
}
},
setChildenNode(node) {
let len = node.childNodes.length;
for (let i = 0; i < len; i++) {
node.childNodes[i].checked = false;
this.setChildenNode(node.childNodes[i]);
}
},
},
};
</script>
🐱 个人主页:TechCodeAI启航,公众号:SHOW科技
🙋♂️ 作者简介:2020参加工作,专注于前端各领域技术,共同学习共同进步,一起加油呀!
💫 优质专栏:前端主流技术分享
📢 资料领取:前端进阶资料可以找我免费领取
🔥 摸鱼学习交流:我们的宗旨是在「工作中摸鱼,摸鱼中进步」,期待大佬一起来摸鱼!
更多推荐
已为社区贡献3条内容
所有评论(0)