我們簡化使用者的操作：

1.1、其所有 父節點 （父節點、父節點的父節點以此類推）全部統一跟隨當前節點變化為 選中 。

一、el-tree 標籤屬性

node-key：每個樹節點用來作為唯一標識的屬性，整棵樹應該是唯一的。標識節點唯一的鍵值名稱。

default-checked-keys：對應el-tree多選樹元件初始化時預設選中ID

check-strictly：是否嚴格的遵循父子不互相關聯的做法,預設為false

check：當複選框被點選的時候觸發的方法<el-tree :data="menuTreeData" :default-checked-keys="editData.menuId" ref="trees" show-checkbox highlight-current accordion check-strictly node-key="id" :props="defaultProps" :default-expand-all="true" @check="clickDeal"></el-tree>

二、點選複選框處理

clickDeal (currentObj, treeStatus) { // 用於：父子節點嚴格互不關聯時，父節點勾選變化時通知子節點同步變化，實現單向關聯。 let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未選中 // 選中 if (selected !== -1) { // 子節點只要被選中父節點就被選中 this.selectedParent(currentObj) // 統一處理子節點為相同的勾選狀態 this.uniteChildSame(currentObj, true) } else { // 未選中 處理子節點全部未選中 if (currentObj.childs.length !== 0) { this.uniteChildSame(currentObj, false) } }},

三、處理選中父節點和子節點

透過 setChecked 設定節點是否選中狀態。

check 事件可以傳遞給 data 屬性的陣列中該節點所對應的物件，將data 中及其下所有位元組，統一處理子節點為相同的勾選狀態

uniteChildSame (treeList, isSelected) { this.$refs.trees.setChecked(treeList.id, isSelected) if (treeList.children) { for (let i = 0; i < treeList.children.length; i++) { this.uniteChildSame(treeList.children[i], isSelected) } } },

怎麼獲取選中節點的父節點呢？

使用 currentNode.parent.key 判斷父節點是否選中，如果沒選中，則設定父節點選中，同時遞迴查詢父節點的父節點選中情況。

// 統一處理父節點為選中selectedParent (currentObj) { let currentNode = this.$refs.tree.getNode(currentObj) if (currentNode.parent.key !== undefined) { this.$refs.trees.setChecked(currentNode.parent, true) this.selectedParent(currentNode.parent) }},