el-table分页多选及回显方式

<!-- table表头设置row-key,需要唯一标识 -->
<el-table :row-key="(row) => { return row.userId }" ></el-table>
    
<!-- 添加多选，设置type="selection" -->
<el-table-column type="selection" width="55" :reserve-selection="true">
</el-table-column>

<!-- 添加分页组件 -->
<el-pagination :page-sizes="[10, 50, 100]" :currentpage="Number(form.pageNum)" :page-size="Number(form.pageSize)" :total="Number(form.total)" layout="prev,pager,next,sizes,jumper" @size-change="onSizeChange"
@current-change="onCurrentChange" />

<el-table @selection-change="handleSelectionChange" ></el-table>

//selectList为勾选的值组成的数组
handleSelectionChange(arr) {
      this.selectList = arr
}

//给table设置ref属性
<el-table ref="multipleTable" :data="tableData"></el-table>

//数据回显
toggleSelection(rows) {
    //使用$nextTick，保证dom已经更新
    this.$nextTick(() => {
        setTimeout(() => {
            //保证有值再进行比对，避免报错
            if (rows && this.tableData.length != 0) {
                //遍历table表格数据与要回显的数组比对，匹配成功的设置为选中状态
                this.tableData.forEach((row) => {
                    rows.forEach((item) => {
                        if (row.userId == item.userId) {
                            //判断唯一标识，若是id一样，则设置该行选中状态为true
                            this.$refs.multipleTable.toggleRowSelection(row, true)
                        }
                    })
                })
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        }, 0);
    });
}

<el-table :data="tableData" @row-click="rowClick" @selection-change="handleSelectionChange" ref="multipleTable" stripe border style="width: 100%" :row-key="(row) => { return row.userId }" height="calc(100% - 48px)">
	<el-table-column type="selection" width="55" :reserve-selection="true">
    </el-table-column>
    <el-table-column type="index" label="序号" align="center" width="50px">
        <template slot-scope="scope">
            {{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}
         </template>
     </el-table-column>
     <el-table-column align="center" label="姓名" prop="userName" />
</el-table>
<el-pagination :page-sizes="[50, 100, 1000, 2000]" :current-page="Number(form.pageNum)"  :page-size="Number(form.pageSize)" :total="Number(form.total)" layout="prev,pager,next,sizes,jumper" @size-change="onSizeChange"  @current-change="onCurrentChange" />

<script>
export default {
	data() {
        return {
            tableData: [],//表格table
            form: {
                pageNum: 1,
                pageSize: 50,
                total: 0,
            },
            selectList: [],//选中的list
        };
    },
    mounted() {
        this.getList()
    },
    methods: {
        // 获取列表
        async getList() {
            let { rows, total } = await user_list(this.form);
            this.tableData = rows;
            this.form.total = total
            this.toggleSelection(this.selectList)
        },
        // 选择人员发生变化时
        handleSelectionChange(arr) {
            this.selectList = arr
        },
        // 数据回显
        toggleSelection(rows) {
            this.$nextTick(() => {
                setTimeout(() => {
                    if (rows && this.tableData.length != 0) {
                        this.tableData.forEach((row) => {
                            rows.forEach((item) => {
                                if (row.userId == item.userId) { this.$refs.multipleTable.toggleRowSelection(row, true)
                                }
                            })
                        })
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                }, 0);
            });
        },
        //分页
        onSizeChange(size) {
            this.form.pageSize = size
            this.getList();
        },
        onCurrentChange(current) {
            this.form.pageNum = current
            this.getList();
        },
    },
}   
</script>

falg:false,
    
handleSelectionChange(arr) {
    if (this.falg) return
    this.selectList = arr
},
toggleSelection(rows) {
    this.$nextTick(() => {
        setTimeout(() => {
            this.rowSelectFlag = true
            ... 
            this.rowSelectFlag = false
        }, 0);
    });
},