Element-ui is the most popular UI framework in China. Its table component provides the ability to select and tree data, but it does not provide the ability to combine the two. Let’s take a look at the following picture.

In the Gif above, when we click on the higher level checkbox, the lower level checkbox is checked as well. When they cancel, they cancel together. To do this, we first need to focus on the data structure to be rendered.


tableData: [{
    id: 1,
    date: '2016-05-02',
    name: 'Wang Xiaohu',
    checked: false,
    address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
}, {
    id: 2,
    date: '2016-05-04',
    name: 'Wang Xiaohu',
    checked: false,
    address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai
}, {
    id: 3,
    date: '2016-05-01',
    name: 'Wang Xiaohu',
    checked: false,
    address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai',
    children: [{
        id: 31,
        date: '2016-05-01',
        name: 'Wang Xiaohu',
        checked: false,
        address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
    }, {
        id: 32,
        date: '2016-05-01',
        name: 'Wang Xiaohu',
        checked: false,
        address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai',
        children: [{
            id: 61,
            date: '2016-05-01',
            name: 'Wang Xiaohu',
            checked: false,
            address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
        }, {
            id: 62,
            date: '2016-05-01',
            name: 'Wang Xiaohu',
            checked: false,
            address: Lane 1519, Jinshajiang Road, Putuo District, Guangzhou City
        }]
    }]
}, {
    id: 4,
    date: '2016-05-03',
    name: 'Wang Xiaohu',
    checked: false,
    address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai
}]

Copy the code

Each row of data that you want to render has its checked, you can bind that checkbox through this key, and there’s some data that has children, it’s an array, that’s the subtree that you want to render, and the objects in that array also have checked, they can also have children (not required), Of course, the actual development of data structure is not necessarily so simple, then it is necessary to change the data structure to transform the array, personally think the data structure is a good programmer must understand and learn.

Using the Template we can customize what we want, we can bind the checkbox of each line to the checked of the corresponding data, and we can customize the table header using slot=”header”, so we can finally write the following code


<el-table-column align="center">
    <template slot="header">
        <el-checkbox v-model="checkedAll"
                     @change="handleCheckedAll"/>
    </template>
    <template slot-scope="scope">
        <el-checkbox v-model="scope.row.checked"
                     @change="handleCheckedOne(scope.row)"/>
    </template>
</el-table-column>

Copy the code

CheckedAll is used to bind to the table header. HandleCheckedAll and handleCheckedOne(scope.row) are sufficient for the rest of the function, but you will notice a problem. The checkbox in the table header will not be checked and the console will not report an error. The solution is to add slot-scope=”scope” after slot=”header” and pass the scope to handleCheckedAll, even if the passed scope is not needed.

When a parent checkbox is checked, the corresponding child checkbox performs the same logic. The child may have its own children, and there may be children below them. Now, it’s easy to think about recursion, and recursion is actually very useful for solving tree problems.

CheckOne (obj, boolValue) {obj. Checked = boolValueif(obj.children) { obj.children.forEach(item => this.checkOne(item, boolValue)) } }, // Bind the change event for each row of the checkbox handleCheckedOne(row) {if (row.checked) {
        this.checkOne(row, true)}else {
        this.checkOne(row, false)}}Copy the code

When we click on the checkbox in the header to change the checkbox of all the rows, we change the array.

CheckAll (arr, boolValue) {arr.forEach(item => {item.checked = boolValueif(item.children) {this.checkall (item.children, boolValue)}})}, handleCheckedAll(scope) {// Scope is not really useful, // console.log(scope.column)if (this.checkedAll) {
        this.checkAll(this.tableData, true)}else {
        this.checkAll(this.tableData, false)}}Copy the code

Executing checkOne() over each row is another way to implement checkAll(), but you also have to deal with the outermost data checkbox, which in my opinion makes the code less logical and less applicable.

Recursion is added for each nodecheckedAnd the id of the above data are used, this article only shows its role in relation to the parent tree. If my article helps you, please give me a thumbs up!!