element table 多选与分页回显功能_el-table多选回显，满满干货

<template>
  <el-table
    :data="tableData"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列定义 -->
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[100, 200, 300, 400]"
    :page-size="100"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400">
  </el-pagination>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      multipleSelection: [], // 已选择的行
      currentPage: 1, // 当前页
      // 其他数据状态定义
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // 根据当前页重新加载数据
    },
    // 初始化表格数据的方法，可以是从服务器获取
    fetchData() {
      // 模拟数据加载
      this.tableData = Array.from({ length: this.pageSize }, (_, index) => ({
        id: (this.currentPage - 1) * this.pageSize + index + 1,
        date: '2016-05-02',
        name: 'John',
        address: 'No.189, Grove St, Los Angeles',
      }));
      // 回显已选择的行
      this.$nextTick(() => {
        this.multipleSelection.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      });
    }
  },
  mounted() {
    this.fetchData(); // 初始化表格数据
  }
};
</script>

这个代码示例展示了如何在Element UI的el-table组件中实现多选功能，并在分页切换后保持已选择行的回显状态。在这个例子中，我们假设fetchData方法是用来从服务器获取表格数据的，并且在数据加载完成后，通过$nextTick确保在DOM更新后执行行的回显。这样可以保证即使在分页后，用户的选择也会被正确地回显。