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都有使用到，本文仅展示其在父子树关联这方面的作用。如果我的文章帮到了你，请给我点个赞吧！！！