el-table树形全选子节点没选中问题

728 阅读1分钟

<template>
    <el-table
            ref="table"
            :data="tmpData"
            style="width: 100%"
            row-key="date"
            border
            :indent="50"
            @select="handleSelect"
            @select-all="handleSelectAll"
            :tree-props="{children: 'children'}">
        <el-table-column
                reserve-selection
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="date"
                label="日期"
                sortable
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                sortable
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageConfig.page"
            :page-sizes="[10, 15, 20, 30, 50]"
            :page-size="pageConfig.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
    </el-pagination>

    <el-button @click="submit">提交</el-button>
</template>
<script>
    export default {
        data() {
            return {
                tableData: [],
                pageConfig: {
                    page: 1,
                    limit: 10
                },
                selectedLists: [],
            }
        },
        computed: {
            // 前端实现分页
            tmpData() {
                let index = (this.pageConfig.page - 1) * this.pageConfig.limit;
                let newArr = this.tableData.slice(index, (this.pageConfig.page * this.pageConfig.limit))
                // console.log(index, this.pageConfig.page * this.pageConfig.limit)
                return newArr
            },
        },
        methods: {
            handleCurrentChange(val) {
                this.pageConfig.page = val
            },
            handleSizeChange(val) {
                this.pageConfig.limit = val
            },
            // 处理单选
            handleSelect(selection, row) {
                if (!row.children) {
                    // 得到父数据
                    // 如果子节点有父节点id  这里的获取方式根据实际更改
                    // let parentData = this.tmpData.find(item => item.fid === row.pfid)
                    let parentData = this.tmpData.reduce((p, c) => {
                        if (c.children && c.children.some(item => item.id === row.id)) {
                            p = c
                        }
                        return p
                    }, {})
                    // 判断parentData里的子节点 是否都存在selection中 
                    let bool = parentData.children.every(item => selection.some(s => s.id === item.id))
                    // 父级是否选中
                    this.$refs.table.toggleRowSelection(parentData, bool)
                } else {
                    // 根据bool让父节点是否选中
                    let isSelected = this.$refs.table.store.states.selection.some(item => row.id === item.id)
                    this.changeSelectStatus([row], isSelected)
                }
                this.$nextTick(() => {
                    this.selectedList = this.$refs.table.store.states.selection
                })
            },
            // 表格全选
            handleSelectAll(val) {
                // this.changeSelectStatus(this.tmpData, this.$refs.table.store.states.isAllSelected)
                this.changeSelectStatus(this.tableData, this.$refs.table.store.states.isAllSelected)
            },
            changeSelectStatus(data, selected) {
                data.forEach(row => {
                    this.$refs.table.toggleRowSelection(row, selected)
                    if (row.children) {
                        this.changeSelectStatus(row.children, selected)
                    }
                })
            },
            submit() {
                console.log(this.$refs.table.store.states.selection)
            }
        },
        created() {
            // 添加模拟数据
            for (let i = 0; i < 30; i++) {
                this.tableData.push({
                    id: i + 1 + 'id',
                    date: i + 1 + 'date',
                    name: i + 1 + 'name',
                    address: i + 1 + 'address',
                    children: []
                })
            }
            this.tableData[0].children = [{
                id: Math.random() + 'id',
                date: '2016-05-0122',
                name: '王小虎1',
                address: '上海市普陀区金沙江路 1519 弄',
            }, {
                id: Math.random() + 'id',
                date: '2016-05-01333',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }]
        }
    }
</script>