要實(shí)現(xiàn)的效果為，勾選父節(jié)點(diǎn)時(shí)缓待，子節(jié)點(diǎn)不會(huì)被勾選蚓耽，如圖：
點(diǎn)擊父節(jié)點(diǎn).png
勾選子節(jié)點(diǎn)時(shí)，父節(jié)點(diǎn)勾選命斧，如圖：
點(diǎn)擊第三級(jí)子節(jié)點(diǎn)時(shí).png
取消父節(jié)點(diǎn)時(shí)田晚，子節(jié)點(diǎn)全部取消，如圖：
第一級(jí)父節(jié)點(diǎn)取消勾選時(shí).png
1国葬、在el-tree代碼中加上父子節(jié)點(diǎn)不互相關(guān)聯(lián)的屬性贤徒，:check-strictly="true"，然后綁定節(jié)點(diǎn)選中時(shí)的事件汇四，@check-change ="checkChange"接奈。
父子節(jié)點(diǎn)不互相關(guān)聯(lián)的屬性.png
節(jié)點(diǎn)勾選時(shí)的回調(diào)事件.png
vue代碼如下：
<el-tree
show-checkbox
:check-on-click-node="true"
:data="allMenu"
default-expand-all
node-key="id"
:expand-on-click-node="false"
:props="menuProps"
ref="menuTree"
@check-change ="checkChange"
:check-strictly="true">
</el-tree>
2、js代碼如下：
// 節(jié)點(diǎn)選中
checkChange(a,b,c){
// 如果為取消
if(b === false){
//如果當(dāng)前節(jié)點(diǎn)有子集
if(a.children){
//循環(huán)子集將他們的選中取消
a.children.map(item => {
this.$refs.menuTree.setChecked(item.id,false);
})
}
}else{
//否則(為選中狀態(tài))
//判斷父節(jié)點(diǎn)id是否為空
if(a.pid !== 0){
//如果不為空則將其選中
this.$refs.menuTree.setChecked(a.pid,true);
}
}
},
