需求：

1. 帶復(fù)選框的樹形table結(jié)構(gòu)
2. 勾選了子級，父級也會勾選；勾選父級，父級內(nèi)部所有子級/孫子級都會被勾選
3. 取消同理

核心代碼：

• 樹形table結(jié)構(gòu)

<el-table
    :data="tableData.list"
    @selection-change="selectChange"
    border
    stripe
    size="mini"
        header-cell-class-name="tableHeader"
    row-key="id"
    :tree-props="{ children: 'children' }"
    :default-expand-all="true"
    @select="handleSelect"
    @select-all="handleSelectAll"
    ref="multipleTable"
>
        <el-table-column type="selection"></el-table-column>
    <el-table-column prop="code" label="編碼" width="160"> </el-table-column>
    <el-table-column prop="name" label="名稱" width="120"> </el-table-column>
    <el-table-column label="操作" width="130">
            <template slot-scope="scope">
                <el-button small="small" type="text" @click="editOne('add', scope.row)">新增</el-button>
            <el-button small="small" type="text" @click="editOne('edit', scope.row)">編輯</el-button>
            <el-button
                    v-if="!scope.row.children"
                small="small"
                type="text"
                @click="deleteOne('one', scope.row)"
                >刪除</el-button
             >
         </template>
        </el-table-column>
</el-table>

• 勾選邏輯

        handleSelectAll() {
            const isAllSelected = this.$refs.multipleTable.store.states.isAllSelected
            let _handleSelectAll = data => {
                data.forEach(item => {
                    this.$refs.multipleTable.toggleRowSelection(item, isAllSelected)
                    _handleSelectAll(item.children || [])
                })
            }
            _handleSelectAll(this.tableData.list)
        },
        handleSelect(selection, current) {
            // 判斷selection中是否存在current,若是存在那么就代表是被勾選上了,若是不存在代表是取消勾選了
            const isChecked = !!selection.find(item => item.id === current.id)
            // 如果當(dāng)前項(xiàng)被取消勾選
            if (!isChecked) {
                // 那么其所有的祖先也應(yīng)該被取消勾選
                this.uncheckedParents(selection, current)
                // 那么其所有的后代也應(yīng)該被取消勾選
                this.toggleCheckedChildrens(selection, current, false)
            } else {
                // 如果當(dāng)前項(xiàng)被勾選
                // 那么若同一組的元素都被勾選了,那么父元素將也被勾選,依次往上類推
                this.checkedParents(selection)
                // 那么其所有的后代都要被勾選
                this.toggleCheckedChildrens(selection, current, true)
            }
        },
        uncheckedParents(selection, item) {
            let _uncheckedParents = data => {
                return data.find(element => {
                    if (element.id === item.id) {
                        return true
                    } else if (_uncheckedParents(element.children || [])) {
                        this.$refs.multipleTable.toggleRowSelection(element, false)
                        for (let i = selection.length - 1; i >= 0; i--) {
                            if (selection[i].id === element.id) {
                                selection.splice(i, 1)
                                break
                            }
                        }
                        return true
                    } else {
                        return false
                    }
                })
            }
            _uncheckedParents(this.tableData.list)
        },
        toggleCheckedChildrens(selection, item, isChecked) {
            let _toggleCheckedChildrens = data => {
                data.find(element => {
                    this.$refs.multipleTable.toggleRowSelection(element, isChecked)
                    if (isChecked && !selection.find(item => item.id === element.id)) {
                        selection.push(element)
                    } else if (!isChecked && selection.find(item => item.id === element.id)) {
                        for (let i = selection.length - 1; i >= 0; i--) {
                            if (selection[i].id === element.id) {
                                selection.splice(i, 1)
                                break
                            }
                        }
                    }
                    _toggleCheckedChildrens(element.children || [])
                })
            }
            _toggleCheckedChildrens(item.children || [])
        },
        checkedParents(selection) {
            let _checkedParents = element => {
                const children = element.children
                if (children && children.length) {
                    const allChildrenChecked = children.every(child => {
                        return _checkedParents(child)
                    })
                    if (allChildrenChecked) {
                        this.$refs.multipleTable.toggleRowSelection(element, true)
                        if (!selection.find(item => item.id === element.id)) {
                            selection.push(element)
                        }
                    }
                }
                return selection.find(item => item.id === element.id)
            }
            this.tableData.list.forEach(element => {
                _checkedParents(element)
            })
        },