elementui实现当前页全选+所有全选+翻页保持选中状

在Element UI中实现表格全选功能，并在翻页时保持选中状态，你可以使用table组件的selection属性以及current-change事件。以下是一个简单的实现示例：

<template>
  <el-table
    :data="tableData"
    ref="multipleTable"
    @selection-change="handleSelectionChange"
    @current-change="handleCurrentChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentPageChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      multipleSelection: [], // 已选择的行
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      total: 0, // 总条数
    };
  },
  methods: {
    // 初始化表格数据
    fetchData() {
      // 模拟请求数据
      this.total = 100; // 假设总共有100条数据
      this.tableData = Array.from({ length: this.pageSize }, (_, index) => ({
        id: (this.currentPage - 1) * this.pageSize + index + 1,
        // 其他数据
      }));
    },
    // 选择变化时的回调
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 当前行变化时的回调
    handleCurrentChange(currentRow, oldCurrentRow) {
      if (currentRow) {
        this.$refs.multipleTable.toggleRowSelection(currentRow, true);
      }
      if (oldCurrentRow) {
        this.$refs.multipleTable.toggleRowSelection(oldCurrentRow, false);
      }
    },
    // 每页显示条数改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    // 当前页改变
    handleCurrentPageChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
  },
  mounted() {
    this.fetchData();
  }
};
</script>

在这个示例中，我们使用了el-table组件的selection列来实现全选功能，并且利用了current-change事件来保证在翻页时保持选中状态。handleSelectionChange方法用于处理用户的选择变化，而handleCurrentChange方法确保了当前行的选中状态与用户的选择一致。翻页时，通过调用fetchData方法重新加载数据，并通过toggleRowSelection方法来保持选中状态。