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

在上面的Gif中，當(dāng)我們點(diǎn)擊高層級的checkbox時(shí)，低層級的checkbox也會一并被勾選。取消的時(shí)候則一起被取消。要實(shí)現(xiàn)這個(gè)功能，我們首先得關(guān)注待渲染的數(shù)據(jù)結(jié)構(gòu)。

tableData: [{

id: 1,

date: '2016-05-02',

name: '王小虎',

checked: false,

address: '上海市普陀區(qū)金沙江路 1518 弄'

}, {

id: 2,

date: '2016-05-04',

name: '王小虎',

checked: false,

address: '上海市普陀區(qū)金沙江路 1517 弄'

}, {

id: 3,

date: '2016-05-01',

name: '王小虎',

checked: false,

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

children: [{

id: 31,

date: '2016-05-01',

name: '王小虎',

checked: false,

address: '上海市普陀區(qū)金沙江路 1519 弄'

}, {

id: 32,

date: '2016-05-01',

name: '王小虎',

checked: false,

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

children: [{

id: 61,

date: '2016-05-01',

name: '王小虎',

checked: false,

address: '上海市普陀區(qū)金沙江路 1519 弄'

}, {

id: 62,

date: '2016-05-01',

name: '王小虎',

checked: false,

address: '廣州市普陀區(qū)金沙江路 1519 弄'

}]

}]

}, {

id: 4,

date: '2016-05-03',

name: '王小虎',

checked: false,

address: '上海市普陀區(qū)金沙江路 1516 弄'

}]

復(fù)制代碼

每一行待渲染的數(shù)據(jù)都有其對應(yīng)的checked,可以通過這個(gè)key綁定對應(yīng)的checkbox，有一些數(shù)據(jù)有children,其為數(shù)組形式,這就是待渲染的子樹，數(shù)組內(nèi)的對象同樣有checked屬性，也同樣可以有children屬性(非必須)，當(dāng)然實(shí)際開發(fā)中數(shù)據(jù)結(jié)構(gòu)不一定這么簡單，這時(shí)就必須通過改變數(shù)據(jù)結(jié)構(gòu)來改造數(shù)組了，個(gè)人認(rèn)為數(shù)據(jù)結(jié)構(gòu)是一個(gè)優(yōu)秀的程序員必須了解和學(xué)習(xí)的。

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

@change="handleCheckedAll"/>

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

復(fù)制代碼

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

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

// boolValue接收一個(gè)布爾值

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)

}

}

復(fù)制代碼

當(dāng)我們要點(diǎn)擊表頭的checkbox來改變所有的行的checkbox的時(shí)候，我們要改變的就是數(shù)組了。

checkAll(arr, boolValue) {

arr.forEach(item => {

item.checked = boolValue

// children同樣是數(shù)組

if (item.children) {

this.checkAll(item.children, boolValue)

}

})

},

handleCheckedAll(scope) {

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

// console.log(scope.column)

if (this.checkedAll) {

this.checkAll(this.tableData, true)

} else {

this.checkAll(this.tableData, false)

}

}

復(fù)制代碼

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

遞歸在為每一個(gè)節(jié)點(diǎn)添加checked以及獲取上述數(shù)據(jù)的id都有使用到，本文僅展示其在父子樹關(guān)聯(lián)這方面的作用。如果我的文章幫到了你，請給我點(diǎn)個(gè)贊吧！！！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。