el-table 实现跨页全选

要实现 el-table 的跨页全选功能，需要在 el-table 上添加 `@header-click` 事件，然后在事件处理函数中获取当前页的数据和已选中的数据，再根据当前页的数据和已选中的数据计算出当前页的全选状态，最后将全选状态同步到 el-table 的全选框上即可。

具体实现可以参考以下代码：

<template>
  <el-table
    :data="tableData"
    v-loading="loading"
    @header-click="handleHeaderClick"
    ref="table"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      selectedData: [],
      loading: false,
      isAllSelected: false,
    };
  },
  methods: {
    async fetchData() {
      this.loading = true;
      // 发送请求获取数据
      const res = await fetch('/api/data');
      const data = await res.json();
      this.tableData = data;
      this.loading = false;
    },
    handleHeaderClick() {
      const table = this.$refs.table;
      const currentPageData = table.store.states.data;
      const selectedData = table.store.states.selection;
      const isSelectedAll = currentPageData.every((item) =>
        selectedData.includes(item)
      );
      this.isAllSelected = isSelectedAll;
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>