element-ui中的table默认选中初始选中数据可分页选中

html

<el-table ref="multipleTable1" @selection-change="handleSelectionChange" :row-key="getRowKeys" :data="liveTableData" v-loading="loading">
    <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
    <el-table-column prop="title" align="center" label="直播名称"> </el-table-column>
</el-table >
<div class="pagination-container">
  <el-pagination style="float: right;" @current-change="handleCurrentChange" :current-page.sync="searchParams.pageNum" :page-size="searchParams.pageSize" background small layout="total, prev, pager, next" :total="total">
  </el-pagination>
  <div style="clear: both;"></div>
</div>

js

<script>
import { liveList } from '@/api/live'
export default {
    props: {
        //默认选中数据
        bindLives: {
            type: Array,
            default: () => []
        },
    },
    data() {
        return {
            loading: false,
            total: 0,
            liveTableData: [],
            searchParams: {
                pageNum: 1,
                pageSize: 1000,
            },
            multipleSelection: []
        }
    },
    mounted() {
        this.getLiveData()
   },
   methods: {
        //分页保留上选中数据
        getRowKeys(row) {
            return row.id
        },
        //获取数据
        getLiveData() {
            this.loading = true
            liveList(this.searchParams,
                res => {
                    this.loading = false
                    if (res.code === 200) {
                        this.liveTableData = []
                        this.liveTableData = res.data.rows
                        this.total = res.data.total
                        this.multipleSelection = JSON.parse(JSON.stringify(this.bindLives))
                        for (let a = 0; a < this.liveTableData.length; a++) {
                            const element1 = this.liveTableData[a];
                            for (let b = 0; b < this.multipleSelection.length; b++) {
                                const element2 = this.multipleSelection[b];
                                if (element1.id === element2.id) {
                                    this.$nextTick(() => {
                                        this.$refs.multipleTable1.toggleRowSelection(this.liveTableData[a], true);
                                    })
                                }
                            }
                        }
                        //将所有数据加载一遍，然后显示一页4条数据，对于数据量大的，只能找后端配合了
                        if (this.searchParams.pageSize === 1000) {
                            this.searchParams.pageSize = 4
                            this.getLiveData()
                        }
                    } else {
                        this.loading = false
                        this.$message.error(res.msg)
                    }
                },
                () => {
                    this.loading = false
                    this.$message.error('网络异常')
                }
            )
        },
        // 分页
        handleCurrentChange(page) {
            this.searchParams.pageNum = page
            this.getLiveData()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        backClick() {
            this.$emit('back')
        },
  }
}