vue+elementUi中的table实现跨页多选功能

在Vue中使用Element UI的<el-table>组件实现跨页多选功能，你可以利用@selection-change事件来追踪多选的项目，并在换页时保留这些项目的选中状态。以下是实现这一功能的示例代码：

<template>
  <div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      :row-key="getRowKey"
      ref="multipleTable"
      @current-change="handleCurrentChange"
    >
      <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="[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: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      currentRow: null
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      this.currentPage = this.tableData.indexOf(val) + 1;
      if (this.multipleSelection.includes(val)) {
        this.$refs.multipleTable.toggleRowSelection(val, true);
      }
    },
    getRowKey(row) {
      return row.id; // 假设每行数据都有唯一的 'id' 字段
    },
    fetchData() {
      // 模拟从服务器获取数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = this.fullData.slice(start, end);
      this.total = this.fullData.length;
    }
  },
  created() {
    this.fetchData();
  },
  computed: {
    fullData() {
      // 假设这是从服务器获取的全量数据
      return [
        // ...数据项
      ];
    }
  }
};
</script>

在这个示例中，handleSelectionChange 方法用于追踪多选的项目，handleCurrentChange 方法用于处理页面切换时的逻辑，保证当前页面的项目如果被选中，那么在换页后该项目应仍然被选中。getRowKey 方法用于提供给表格的 :row-key 属性，以便表格可以正确地追踪行的状态。fetchData 方法用于模拟从服务器获取数据，并根据当前页码和页大小计算当前页的数据。

请注意，这个示例中的fetchData和fullData需要根据你的实际数据获取方式进行相应的修改。此外，getRowKey方法中的row.id应替换为你数据中的唯一标识字段。