綜合參考了這兩篇文章
- vue + element之Tree父級節(jié)點與子級節(jié)點不關(guān)聯(lián)劣坊、子節(jié)點與父節(jié)點關(guān)聯(lián)
https://blog.csdn.net/qq_40745466/article/details/106356951 - iview Tree 樹形控件回顯問題
https://www.pianshen.com/article/65271471474/
需求要求選父級的時候鸣峭，其下的子集要全部選中绘面。但是如果選子集的時候蹭秋，某個父級下的子集全部取消掉凿将，父級不會跟著取消掉。
-
如取消掉數(shù)據(jù)分析-導出颊埃，數(shù)據(jù)分析及統(tǒng)計并不會取消勾選蔬充。
image.png - check-strictly：在顯示復選框的情況下，是否嚴格的遵循父子不互相關(guān)聯(lián)的做法
- @on-check-change：點擊復選框時觸發(fā)班利。形參分別為當前已勾選節(jié)點的數(shù)組饥漫、當前項。
- 用node.children[i].checked = node.checked;這個方法出現(xiàn)的情況就是罗标，數(shù)據(jù)雖然改變了庸队，但是頁面上的視圖沒有及時改變，因此改用this.$set(node.children[i],'checked',node.checked)
<Tree
:data="editRoleObj.resourceDTOList"
ref="roleTree"
expand-node
show-checkbox
check-strictly
@on-check-change="treeCheck"
></Tree>
// list為當前已勾選節(jié)點的數(shù)組馒稍，data為當前項
treeCheck(list,data){
this.childNodes(data)
},
childNodes(node){
let len = node.children.length;
for(let i = 0; i < len; i++){
// node.children[i].checked = node.checked;
this.$set(node.children[i],'checked',node.checked)
this.childNodes(node.children[i]);
}
},
