elementui树形复选框_Element-ui表格树形控件结合复选框实践
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表格树形控件结合复选框实践的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： datetime 取分钟_datetim
- 下一篇： 钢铁侠机器人公仔_这个618，买个钢铁侠