element ui的el-tree多選樹(複選框)父子節點關聯不關聯的問題，選中當前節點，他的子節點和父節點是否被選中，非常詳細
屬性check-strictly
官方文檔提供屬性check-strictly，在顯示覆選框的情況下，是否嚴格的遵循父子不互相關聯的做法，默認爲 false。
而此屬性的意思是：
**默認false，父子關聯。**有如下現象及問題：
1、當你通過函數設置勾選節點的時候，只要父節點被勾選子節點必會勾選上，即便設置勾選的list中無此子節點。
2、當你點擊勾選複選框時候，若點擊父節點，其下子節點全部統一跟隨父節點變化；若點擊子節點，子節點部分勾選時父節點處於半選狀態，子節點全部勾選時父節點選中，子節點全部不勾選時父節點未選中。
設置true，嚴格的遵循父子不互相關聯。
1、當你通過函數設置勾選節點的時候，嚴格通過設置勾選的list中有無此節點來斷定是否勾選。
2、當你點擊勾選複選框時候，無論點擊的哪個節點只會改變當前節點的勾選狀態，不存在半選狀態。
系統的角色菜單控制的問題
問題來了，在系統的角色菜單控制的時候，需要滿足以下條件：
1、當通過函數設置勾選節點的時候，需要嚴格通過設置勾選的list中有無此節點來斷定是否勾選，即勾選父節點而不一定勾選全部子節點。
2、當點擊勾選複選框時候，若點擊父節點，其下子節點全部統一跟隨父節點變化。
3、當點擊勾選複選框時候，若點擊子節點，子節點部分勾選時父節點處於半選狀態，子節點全部勾選時父節點選中，子節點全部不勾選時父節點未選中。
1.要求父子之間嚴格不關聯，選中當前節點，他的所有子節點都被選中
2.要求父子之間嚴格不關聯，選中當前節點，他的所有父節點和子節點都被選中
需求思考：
一、check-strictly=false，行不通
按照需要滿足的條件，明顯靠近將check-strictly設置爲false，於是從check-strictly=false父子互相關聯的基礎入手，需要解決的問題就是：
將尚未全部勾選的子節點對應的父節點改爲半勾選狀態，但是查找文檔良久無果。
只有getHalfCheckedKeys和getHalfCheckedNodes，並沒有設置成半勾選。
二、check-strictly=true，試一試
只能試一下將check-strictly設置爲true，從check-strictly=true嚴格的遵循父子不互相關聯入手，需要解決的問題就是：
1、當點擊勾選複選框時候，若點擊父節點，其下子節點全部統一跟隨父節點變化。
2、當點擊勾選複選框時候，若點擊子節點，子節點部分勾選時父節點處於半選狀態，子節點全部勾選時父節點選中，子節點全部不勾選時父節點未選中。
而在嚴格的父子不互相關聯時，點擊父子節點不會出現半選狀態，也無法通過函數設置半選狀態，無奈簡化解決問題：
1、當點擊勾選複選框時候，若狀態爲 選中 ：
1.1、其所有 父節點 （父節點、父節點的父節點以此類推）全部統一跟隨當前節點變化爲 選中 。
1.2、其下 子節點 全部統一跟隨父節點變化爲 選中 。
2、當點擊勾選複選框時候，若狀態爲 未選中 ，其下 子節點 全部統一跟隨父節點變化爲 未選中 。
解決代碼：
1、el-tree標籤屬性
<el-tree
ref="tree"
:data="data"
:props="defaultProps"
:show-checkbox="true"
node-key="id"
highlight-current
:expand-on-click-node="false"
:default-checked-keys="checkedId"
:check-strictly="true"
@check="nodeClick">
</el-tree>
：data,是你要展示的數據
node-key：每個樹節點用來作爲唯一標識的屬性，整棵樹應該是唯一的。標識節點唯一的鍵值名稱。
default-checked-keys = checkedId：對應el-tree多選樹組件初始化時默認選中ID
check-strictly = true：是否嚴格的遵循父子不互相關聯的做法
check：當複選框被點擊的時候觸發的方法
props：配置選項，具體看下圖。配置數據庫字段名與這幾個屬性一致
而根據後臺的返回，針對:props=“defaultProps”，我的配置爲：
defaultProps: {
children: 'children',
label: 'categoryName'
disabled: this.isDisabled
}
其他屬性：
data() {
return {
data: [],
checkedId:"",
defaultProps: {
children: 'children',
label: 'categoryName'
},
};
},
2、el-tree組件有變化時給多選樹重新賦值
updated () {
// 給多選樹設置默認值
this.$refs.tree.setCheckedKeys(this.checkedId)
},
checkedId爲勾選節點的數組，不區分父子節點。
3、重點:複選框點擊時的特殊處理
nodeClick (currentObj, treeStatus) {
console.log(currentObj)
console.log("=========")
console.log(treeStatus)
// 用於：父子節點嚴格互不關聯時，父節點勾選變化時通知子節點同步變化，實現單向關聯。
let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未選中,>=0爲選中
console.log(selected)
// 選中
if (selected !== -1) {
// 子節點只要被選中父節點就被選中(需要選中父節點時候調用此方法)
//this.selectedParent(currentObj)
// 統一處理子節點爲相同的勾選狀態
this.uniteChildSame(currentObj, true)
} else {
// 未選中 處理子節點全部未選中
if (currentObj.children.length !== 0) {
this.uniteChildSame(currentObj, false)
}
}
},
// 統一處理子節點爲相同的勾選狀態
uniteChildSame (treeList, isSelected) {
console.log("aaaaaaaaaaaaa")
console.log(treeList);
this.$refs.tree.setChecked(treeList.id, isSelected)
for (let i = 0; i < treeList.children.length; i++) {
this.uniteChildSame(treeList.children[i], isSelected)
}
},
// 統一處理父節點爲選中
selectedParent (currentObj) {
let currentNode = this.$refs.tree.getNode(currentObj)
if (currentNode.parent.key !== undefined) {
this.$refs.tree.setChecked(currentNode.parent, true)
this.selectedParent(currentNode.parent)
}
},
原文鏈接：https://blog.csdn.net/Beam007/article/details/87858291