【vue+elementui】el-table树形结构

需求：

1. 带复选框的树形table结构
2. 勾选了子级，父级也会勾选；勾选父级，父级内部所有子级/孙子级都会被勾选
3. 取消同理

核心代码：

• 树形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)
            // 如果当前项被取消勾选
            if (!isChecked) {
                // 那么其所有的祖先也应该被取消勾选
                this.uncheckedParents(selection, current)
                // 那么其所有的后代也应该被取消勾选
                this.toggleCheckedChildrens(selection, current, false)
            } else {
                // 如果当前项被勾选
                // 那么若同一组的元素都被勾选了,那么父元素将也被勾选,依次往上类推
                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)
            })
        },