前言
示例版本為 Element-ui 2.13.0 + Vue 2.6.11
最近想弄 Element-ui checkbox 的多級聯動，網上相關的例子大多數為二級聯動，自己研究了一下，弄了一個樹形菜單的多級聯動，常用于角色管理等業務。(僅供參考，未考慮性能問題)
數據模型
[
{
"menu": {
"id":14,
"menuName":"測試管理',
"parentId":0
} ，
"menuOptionsList":[
{
"id":46,
"optionsName":"列表",
"checked":false
},
{
"id":47,
"optionsName":"新增",
"checked":false
}
],
"children":[],
"checked":false
}
]復制代碼
這里展示的最頂級的數據結構，下級數據只需要在 children 中添加即可。需要注意的是 checked 屬性，本身數據庫表中沒有這個數據，需要后臺建立一個 VO 映射實體將 checked 字段添加進去，默認值為 false.
邏輯處理
html 使用 el-table + el-chekbox 展示：
:data="menuList"
border
fit
size="mini"
highlight-current-row
row-key="menu.id"
:default-expand-all="true"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
v-model="scope.row.checked"
:indeterminate="scope.row.indeterminate"
@change="handleCheckAllChange(scope.row, $event)">
{{ scope.row.menu.menuName }}
v-for="options in scope.row.menuOptionsList"
:key="options.id"
v-model="options.checked"
:label="options.optionsName"
@change="handleCheckChange(scope.row)"
/>
復制代碼
核心方法 handleCheckAllChange 和 handleCheckChange 這兩個方法，handleCheckAllChange 是 菜單選項 列按鈕被點擊的事件，handleCheckChange 是 選項列表 列被點擊的事件。
handleCheckAllChange(菜單列改變事件)
handleCheckAllChange(val, checked) {
// 有下級去處理下級
if (val.children.length > 0) {
// 遞歸設置子級選中狀態
this.findChildren(val.children, checked)
} else {
// 無下級處理本級
val.menuOptionsList.forEach(options => { options.checked = checked })
}
// 處理上級
if (val.menu.parentId !== 0) {
遞歸設置上級選中狀態
this.findParent(this.menuList, val.menu.parentId)
}
// 設置全選的未全部選中的狀態
val.indeterminate = false
}
復制代碼
根據數據中 children 的長度來判斷是否存在下級，如果存在就執行遞歸方法 findChildren 將子類的 checked 屬性設置為 true，不存在處理本級的 checked 屬性即可。需要注意的是 parentId 等于 0 證明當前菜單父級為頂級菜單，不需要再向上尋找。以此為判斷依據來進行父級菜單的判斷條件。 如果 parentId 不等于 0 說明當前全選的菜單存在父級，需要將父級的選項框進行狀態設置。
handleCheckChange(選項列改變事件)
handleCheckChange(val) {
const length = val.menuOptionsList.length
let checkedLength = 0
val.menuOptionsList.forEach(options => {
if (options.checked) {
checkedLength++
}
})
val.checked = checkedLength === length
val.indeterminate = checkedLength > 0 && checkedLength < length
// 處理上級
if (val.menu.parentId !== 0) {
this.findParent(this.menuList, val.menu.parentId)
}
}
復制代碼
這個方法對應著 選項列表 列選中的狀態，需要對 菜單名稱 列的全選狀態進行控制。首先通過變量 length 獲取到當前數據行選項列表的數量，遍歷選項數組根據 checked 的狀態獲取到已選中的選項數量。val.checked 代表當前列是否全選，val.indeterminate 代表當前列是否有選項被選中。但是這只是處理了當前行的狀態，當前行可能是某一菜單的子集，所以需要由下向上的去尋找菜單的父級并設置選中狀態。這里同樣用到了上面方法中的 findParent 函數。
findChildren(遞歸查詢子集)
findChildren(list, checked) {
list.forEach(children => {
children.checked = checked
children.indeterminate = false
children.menuOptionsList.forEach(options => {
options.checked = checked
if (children.children.length > 0) {
this.findChildren(children.children, checked)
}
})
})
}
復制代碼
findParent(遞歸查詢父集)
findParent(list, parentId) {
list.forEach(result => {
let parentCheckedLength = 0
let parentIndeterminateLength = 0
if (result.menu.id === parentId) {
result.children.forEach(children => {
if (children.indeterminate) {
parentIndeterminateLength++
} else if (children.checked) {
parentCheckedLength++
}
})
result.checked = parentCheckedLength === result.children.length
result.indeterminate = (parentIndeterminateLength > 0 || parentCheckedLength > 0) && parentCheckedLength < result.children.length
if (result.menu.parentId !== 0) {
this.findParent(this.menuList, result.menu.parentId)
}
} else if (result.children.length > 0) {
this.findParent(result.children, parentId)
}
})
}
復制代碼
完整示例
由于源碼篇幅過長，暫時將源碼放到 GitHub 了，希望可以幫助到你。
 wakeup())
...)
