前言

示例版本為 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 了，希望可以幫助到你。

總結

以上是生活随笔為你收集整理的elementui树形复选框,element-ui checkbox 组件的树形联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。