- 選擇父級 自動 選擇子級
- 選擇子級自動選擇父級
- 取消子級不取消父級
<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 }) {
// 節(jié)點所對應(yīng)的對象、節(jié)點本身是否被選中腐巢、節(jié)點的子樹中是否有被選中的節(jié)點
//如果為取消
if (checkedKeys.includes(data.id)) {
//如果當前節(jié)點有子集
this.selectChildren(data);
}
},
handleCheckChange(data, checked, indeterminate) {
// 節(jié)點所對應(yīng)的對象赃份、節(jié)點本身是否被選中需频、節(jié)點的子樹中是否有被選中的節(jié)點
//如果為取消
if (checked === false) {
//如果當前節(jié)點有子集
if (data.children) {
//循環(huán)子集將他們的選中取消
data.children.map(item => {
this.$refs.permissionNode.setChecked(item.id, false);
});
}
} else {
//否則(為選中狀態(tài))
//判斷父節(jié)點id是否為空
if (data.parentId !== 0) {
//如果不為空則將其選中
this.$refs.permissionNode.setChecked(data.parentId, true);
}
}
var check = this.$refs.permissionNode.getCheckedNodes();
console.log(data, checked, indeterminate,check);
},
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
