Vue+ElementUI+Table实现表格初始化选中数据以及分页切换保留勾选数据

在Vue中结合ElementUI实现表格初始化时勾选以及在分页切换时保持勾选状态，可以通过以下步骤实现：

1. 使用el-table组件并开启row-key属性，指定唯一键值作为每行数据的key。
2. 使用el-table-column的type="selection"来创建多选框列。
3. 使用:reserve-selection="true"属性来保证在切换分页时保留选中状态。
4. 在data中定义一个数组来保存选中的行数据selectedRows。
5. 使用@selection-change事件来监听选中行的变化，并更新selectedRows数组。

以下是一个简单的示例代码：

<template>
  <div>
    <el-table
      :data="tableData"
      row-key="id"
      @selection-change="handleSelectionChange"
      :reserve-selection="true"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      selectedRows: [], // 选中的行
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 0, // 总条数
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      // 分页大小变化时重新加载数据
      this.loadData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // 分页页码变化时重新加载数据
      this.loadData();
    },
    loadData() {
      // 模拟请求数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = this.getMockData().slice(start, end);
      this.total = this.getMockData().length;
    },
    getMockData() {
      // 模拟数据
      const mockData = [];
      for (let i = 1; i <= 100; i++) {
        mockData.push({
          id: i,
          date: '2016-05-02',
          name: 'John',
          address: `No. ${i} Lake Park`,
        });
      }
      return mockData;
    },
  },
  mounted() {
    this.loadData();
  },
};
</script>

在这个示例中，我们定义了一个loadData方法