需求：
后台菜单管理功能，需要勾选用户关联的菜单，拿到所有菜单id。可以单独选择父节点，选子节点时默认选中父节点，无半选状态。
效果：
代码：
<template>
<el-tree
ref="tree"
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
:props="defaultProps"
check-strictly="false"
@check="handleClick"
>
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1, label: "一级 1",
children: [
{ id: 11, label: "二级 1-1",
children: [
{ id: 111, label: "三级 1-1-1", },
{ id: 112, label: "三级 1-1-2", },
],
},
],
},
{
id: 2, label: "一级 2",
children: [
{ id: 21, label: "二级 2-1", },
{ id: 22, label: "二级 2-2", },
],
},
],
}
}
methods: {
handleClick(data) {
const node = this.$refs.tree.getNode(data.id);
this.setNode(node);
},
setNode(node) {
if (node.checked) {
//选中,递归设置所有父节点选中
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) {
for (let i = 0; i < node.childNodes.length; i++) {
node.childNodes[i].checked = false;
this.setChildenNode(node.childNodes[i]);
}
},
// 获取所有选中项id
submit(){
let checkedId= this.$refs.tree.getCheckedKeys();
console.log(checkedId)
}
}
}
</script>
check-strictly：表示在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。
