（12）VUE + ElementUI 树形数据Table表格全选/取消全选操作

image.png

源码

<el-table
                ref="districtTable"
                :data="newDistrictData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                v-loading="isloading"
                border
                default-expand-all
                :select-on-indeterminate="true"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                @select-all="selectAll"
            >
                <el-table-column type="selection" label="全选" width="55" align="center"></el-table-column>
                <el-table-column type="index" :index="getId" label="id" width="55" align="center"></el-table-column>
                <el-table-column prop="name" label="区域"></el-table-column>
                <el-table-column prop="status" label="状态" width="50" align="center"></el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-lx-add"
                            v-show="scope.row.pid == '0' || scope.row.pid == '1'"
                            @click="handleAdd(scope.$index, scope.row)"
                        >添加子区域</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

// 需要在data里面定义初始值 isAllSelect: false
// 全选/取消选操作
        selectAll(selection, first) {
            if (!first) {
                this.isAllSelect = !this.isAllSelect;
            }
            selection.map(el => {
                if (el.children) {
                    el.children.map(j => {
                        this.toggleSelection(j, this.isAllSelect);
                    });
                    if (el.children.length > 0) {
                        this.selectAll(el.children, true);
                    }
                }
            });
        },
        toggleSelection(row, select) {
            if (select) {
                this.$refs.districtTable.toggleRowSelection(row, select);
            } else {
                this.$refs.districtTable.clearSelection();
            }
        },