el-table中的@select-all翻页全选

在Element UI的表格组件`el-table`中，如果你想要实现“全选”功能并且支持翻页操作，可以利用其提供的列属性和自定义事件结合。`@select-all`是一个列的事件处理器，用于处理全选/取消全选操作。

首先，在列定义里，你可以添加一个`selection-column`配置，它包含`type`属性为`selection`，表示这是一个复选框列，用户可以选择多行：

<template>
  <el-table :data="tableData" highlight-current-row>
    <!-- ... -->
    <el-table-column type="selection" label="选择" @select-all="handleSelectAll"></el-table-column>
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  methods: {
    handleSelectAll(isSelected) {
      // isSelected是一个布尔值，true表示全选，false表示取消全选
      this.selectAllStatus = isSelected; // 更新全局状态，以便在整个数据集中应用全选
      const pageData = this.tableData.slice(this.currentPage * this.pageSize, (this.currentPage + 1) * this.pageSize); // 获取当前页的数据
      pageData.forEach(row => row.isSelected = isSelected); // 对当前页的每一行设置全选状态
    }
  }
};
</script>

当用户触发`@select-all`事件时，你需要更新全局的全选状态，并同步更新当前页的数据，使其显示全选或取消全选的状态。

然而，由于表格是分页的，全选功能可能会受页面切换的影响，因为全选状态只保存了当前页的数据。如果需要在整个分页的上下文中保持全选状态，可能需要额外的逻辑，例如存储每个页的全选状态，或者提供一个手动同步全选状态到其他页的功能。