Element-ui是現在國內用得比較多的ui框架，其table組件提供了多選以及樹形數據的功能，但卻沒有提供將兩者結合的功能，我們先來看下面的圖片，本文將介紹以下的功能如何實現以及其中的一些踩坑點。

在上面的Gif中，當我們點擊高層級的checkbox時，低層級的checkbox也會一并被勾選。取消的時候則一起被取消。要實現這個功能，我們首先得關注待渲染的數據結構。

tableData: [{

id: 1,

date: '2016-05-02',

name: '王小虎',

checked: false,

address: '上海市普陀區金沙江路 1518 弄'

}, {

id: 2,

date: '2016-05-04',

name: '王小虎',

checked: false,

address: '上海市普陀區金沙江路 1517 弄'

}, {

id: 3,

date: '2016-05-01',

name: '王小虎',

checked: false,

address: '上海市普陀區金沙江路 1519 弄',

children: [{

id: 31,

date: '2016-05-01',

name: '王小虎',

checked: false,

address: '上海市普陀區金沙江路 1519 弄'

}, {

id: 32,

date: '2016-05-01',

name: '王小虎',

checked: false,

address: '上海市普陀區金沙江路 1519 弄',

children: [{

id: 61,

date: '2016-05-01',

name: '王小虎',

checked: false,

address: '上海市普陀區金沙江路 1519 弄'

}, {

id: 62,

date: '2016-05-01',

name: '王小虎',

checked: false,

address: '廣州市普陀區金沙江路 1519 弄'

}]

}]

}, {

id: 4,

date: '2016-05-03',

name: '王小虎',

checked: false,

address: '上海市普陀區金沙江路 1516 弄'

}]

復制代碼

每一行待渲染的數據都有其對應的checked,可以通過這個key綁定對應的checkbox，有一些數據有children,其為數組形式,這就是待渲染的子樹，數組內的對象同樣有checked屬性，也同樣可以有children屬性(非必須)，當然實際開發中數據結構不一定這么簡單，這時就必須通過改變數據結構來改造數組了，個人認為數據結構是一個優秀的程序員必須了解和學習的。

使用template可以自定義我們想要的內容，我們可以通過對應數據的checked綁定每一行的checkbox,使用slot="header"可以自定義表頭，因此最終我們可以寫出以下代碼

@change="handleCheckedAll"/>

@change="handleCheckedOne(scope.row)"/>

復制代碼

checkedAll用于與表頭綁定，handleCheckedAll和handleCheckedOne(scope.row)足夠我們完成后續的功能，但你會發現一個問題，表頭的checkbox無法被勾選，控制臺也不會報錯，解決方法是在slot="header"后添加slot-scope="scope",同時將scope傳入handleCheckedAll,即使傳入的scope并不需要用到。

當我們勾選父級checkbox時，對應的子級checkbox也執行了相同的邏輯，子級可以還會有自己的子級，在其下面可能還存在著子級。這時，你很容易想到遞歸，事實上遞歸在解決樹類問題確實實用性很高。

// boolValue接收一個布爾值

checkOne(obj, boolValue) {

obj.checked = boolValue

// 判斷存不存在children,存在就遞歸賦值

if (obj.children) {

obj.children.forEach(item => this.checkOne(item, boolValue))

}

},

// 綁定每一行checkbox的change事件

handleCheckedOne(row) {

if (row.checked) {

this.checkOne(row, true)

} else {

this.checkOne(row, false)

}

}

復制代碼

當我們要點擊表頭的checkbox來改變所有的行的checkbox的時候，我們要改變的就是數組了。

checkAll(arr, boolValue) {

arr.forEach(item => {

item.checked = boolValue

// children同樣是數組

if (item.children) {

this.checkAll(item.children, boolValue)

}

})

},

handleCheckedAll(scope) {

// 實際上scope并沒有什么用處，僅為了解決上面提到的表頭checkbox不顯示的bug

// console.log(scope.column)

if (this.checkedAll) {

this.checkAll(this.tableData, true)

} else {

this.checkAll(this.tableData, false)

}

}

復制代碼

遍歷每一行執行checkOne()也是一種實現checkAll()的做法，但你還得處理最外層數據的checkbox，個人認為這樣反而使得代碼邏輯不清晰，泛用性差。

遞歸在為每一個節點添加checked以及獲取上述數據的id都有使用到，本文僅展示其在父子樹關聯這方面的作用。如果我的文章幫到了你，請給我點個贊吧！！！

總結

以上是生活随笔為你收集整理的elementui树形复选框_Element-ui表格树形控件结合复选框实践的全部內容，希望文章能夠幫你解決所遇到的問題。

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