- 选择父级 自动 选择子级
- 选择子级自动选择父级
- 取消子级不取消父级
<el-tree
ref="permissionNode"
:props="props"
:data="all_permission"
node-key="id"
check-strictly
@check="handleCheck"
@check-change="handleCheckChange"
></el-tree>
data() {
return {
props: {
// label: 'title',
children: "children"
},
all_permission:[{
id:1,
label: "父级"
children:[{
label: "子级"
parentId: 1,
}]
}]
};
},
methods:{
selectChildren(data) {
data && data.children && data.children.map(item => {
this.$refs.permissionNode.setChecked(item.id, true);
if (data.children) {
this.selectChildren(item)
}
});
},
handleCheck(data, { checkedKeys }) {
// 节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
//如果为取消
if (checkedKeys.includes(data.id)) {
//如果当前节点有子集
this.selectChildren(data);
}
},
handleCheckChange(data, checked, indeterminate) {
// 节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
//如果为取消
if (checked === false) {
//如果当前节点有子集
if (data.children) {
//循环子集将他们的选中取消
data.children.map(item => {
this.$refs.permissionNode.setChecked(item.id, false);
});
}
} else {
//否则(为选中状态)
//判断父节点id是否为空
if (data.parentId !== 0) {
//如果不为空则将其选中
this.$refs.permissionNode.setChecked(data.parentId, true);
}
}
var check = this.$refs.permissionNode.getCheckedNodes();
console.log(data, checked, indeterminate,check);
},
}