elementui 表格全选当前页，全选所有数据

在 ElementUI 的表格中，可以通过设置 `show-selection` 属性来开启表格的多选功能，然后在表格的列中添加一个选择列来显示多选框，如下所示：

<el-table
  :data="tableData"
  @selection-change="handleSelectionChange"
  show-selection
>
  <el-table-column type="selection"></el-table-column>
  <!-- 其他列 -->
</el-table>

接着，如果需要实现全选当前页的功能，可以通过调用表格实例的 `toggleAllSelection` 方法来实现，如下所示：

methods: {
  handleSelectAll(selection) {
    this.$refs.table.toggleAllSelection();
  },
  handleSelectionChange(selection) {
    this.selectedRows = selection;
  }
}

其中，`handleSelectAll` 方法会在全选按钮点击时触发，然后调用表格实例的 `toggleAllSelection` 方法来实现全选当前页的功能。

如果需要实现全选所有数据的功能，可以通过在表格的底部添加一个全选按钮来实现，如下所示：

<template>
  <div>
    <el-table
      ref="table"
      :data="tableData"
      @selection-change="handleSelectionChange"
      show-selection
    >
      <el-table-column type="selection"></el-table-column>
      <!-- 其他列 -->
    </el-table>
    <div style="margin-top: 20px;">
      <el-checkbox v-model="isAllSelected" @change="handleSelectAll">
        全选所有数据
      </el-checkbox>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      isAllSelected: false // 是否全选所有数据
    };
  },
  mounted() {
    // 加载表格数据
  },
  methods: {
    handleSelectAll(value) {
      this.$refs.table.clearSelection();
      if (value) {
        this.$refs.table.toggleAllSelection();
      }
    },
    handleSelectionChange(selection) {
      this.isAllSelected = this.tableData.length === selection.length;
    }
  }
};
</script>

其中，`isAllSelected` 用来保存是否全选所有数据的状态，`handleSelectAll` 方法会在全选所有数据的复选框状态改变时触发，然后调用表格实例的 `clearSelection` 方法来清空表格的选中状态，最后调用表格实例的 `toggleAllSelection` 方法来实现全选所有数据的功能。在 `handleSelectionChange` 方法中，需要根据选中的行数来判断是否全选所有数据，并更新全选所有数据的复选框状态。