element 表格 多层嵌套 使用翻页组件 并且记录勾选状态

首先使用el table

<el-table
    :data="tableData"
    :header-cell-style="{ background: '#F5F7FA' }"
    highlight-current-row
    border
    :row-key="(row) => row.blbh"  // 主要添加这个
    :expand-row-keys="rowList"   // 返回一个数组 满足这个key 才展开显示
    @expand-change="expandChange"
    ref="multipleTable"
    style="width: 100%"
>
<!--  :default-expand-all="true" -->
    <el-table-column type="expand">
        <template slot-scope="props">
            <el-table
                :data="props.row.zjList"
                :header-cell-style="{ background: '#F5F7FA' }"
                highlight-current-row
                border
                :row-key="(row) => row.bbbh"
                @selection-change="
                    (val) => {
                        handleSelectionChange(val, props.$index); 
                    }
                "
                @toggleAllSelection="toggleAllSelection"
                :ref="`subtable${props.$index}`" // 必须这么填写 不然拿不到 ref ？
                style="width: 100%"
            >
                <el-table-column
                    type="selection"
                    :reserve-selection="true"
                    width="55"
                >
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="bz"
                    label="备注"
                    v-if="$props.bllxs !== '1'"
                >
                </el-table-column>
            </el-table>
        </template>
</ez-table>

// 先获取 父组件 嵌套子组件 唯一 的 id 通过唯一id 进行绑定

// 多选框的值
handleSelectionChange(val, index) {
    this.selectedRows[this.tableData[index].blbh] = [];
    const biaobenList = this.tableData[index].zjList || [];
    for (let i = 0; i < biaobenList.length; i++) {
        for (let j = 0; j < val.length; j++) {
            if (biaobenList[i].bbbh == val[j].bbbh) {
                this.selectedRows[this.tableData[index].blbh].push({
                    id: '',
                    sydbh: '',
                    bbbh: biaobenList[i].bbbh,
                });
                continue;
            }
        }
    }
    //  查询所有的 唯一 id
    let id = [];
    for (let blbh in this.selectedRows) {
        const rows = this.selectedRows[blbh];
        for (let i = 0; i < rows.length; i++) {
            const bbbh = rows[i].bbbh;
            id.push(bbbh);
        }
    }
    this.tableId = [...new Set(id)];
},

然后在事件中做处理

// 每次点开时候触发 赋值 不然不会赋值上
expandChange(row, expanded) {
            setTimeout(() => {
                this.tableId.forEach(key => {
                    this.tableData.forEach((row,index1) => {
                        row.zjList.forEach((rows,index2)=>{
                            if (rows.bbbh == key) {
                                this.$refs[`subtable${index1}`] && this.$refs[`subtable${index1}`].toggleRowSelection(rows, true);
                            }
                        });
                    });
                });
            },400); 
        },

// 添加 事件

 // 切换分页增加勾选 
        gxChange(){
            this.$nextTick(()=>{
                let list = [];
                this.tableId.forEach(key => {
                    this.tableData.forEach((row,index1) => {
                        for(let j = 0;j<row.zjList.length;j++){
                            if(row.zjList[j].bbbh == key){
                                list.push(row.blbh);
                                break;
                            }
                        }
                    });
                });
                this.rowList = list;

                // setTimeout(() => {
                this.$nextTick(()=>{
                    this.tableId.forEach(key => {
                        this.tableData.forEach((row,index1) => {
                            row.zjList.forEach((rows,index2)=>{
                                if (rows.bbbh == key) {
                                    this.$refs[`subtable${index1}`].toggleRowSelection(rows, true);
                                }
                            });
                        });
                    });
                });
            });
        },

实现效果 记录翻页状态