el-table 全选取消全选

### Vue Element-ui `el-table` 组件实现全选与取消全选功能

为了实现在 `el-table` 中的全选和取消全选功能，可以利用 `el-table` 提供的选择事件以及一些自定义方法来管理已选项的状态。

#### HTML 部分
通过绑定 `@select-all` 和 `@selection-change` 事件处理函数到表格上，可以在用户交互时捕获这些动作并作出响应。另外，设置 `row-key` 属性确保每一行都有唯一的键值用于精确控制选择状态[^1]。

<template>
  <div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @select-all="selectAll"
      :row-key="getRowKeys">
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- 其他列配置... -->
    </el-table>

    <!-- 批量操作按钮 -->
    <button @click="toggleSelectAll">Toggle Select All</button>
  </div>
</template>

#### JavaScript 方法
在脚本部分定义几个辅助函数用来处理不同的逻辑需求：

- `getAllOptions`: 获取所有可选项的数据列表。
- `getSelectedOptions`: 返回当前被选中的项目集合。
- `selectAll(selection)`：此方法会在点击全选/反向全选时调用，参数 `selection` 是布尔类型的标志位表示是否要全部选中。
- `toggleSelectAll()`: 切换全选状态的方法，它会根据现有条件决定是要执行全选还是清空选择。
- `handleSelectionChange(val)`: 当前页面内所做任何单个或多个项目的选取都会触发这个回调函数；这里主要负责更新内部维护的选择记录数组 `_selectedRows`.

<script>
export default {
  data() {
    return {
      tableData: [
        { id: '1', name: 'Tom' },
        { id: '2', name: 'Jerry' }
        // 更多数据...
      ],
      _allOptions: [],     // 存储所有的选项
      _selectedRows: []    // 记录已经选择了哪些行
    };
  },
  mounted() {
    this.getAllOptions();
  },
  methods: {
    getRowKeys(row){
      return row.id;
    },
    getAllOptions(){
      this._allOptions = [...this.tableData];
    },
    getSelectedOptions(){
      const selectedIds = this._selectedRows.map(item => item.id);
      return this._allOptions.filter(option => selectedIds.includes(option.id));
    },
    selectAll(selection) {
      if (selection === true || selection.length > 0) {
        this.$refs.multipleTable.clearSelection(); // 清除原有选择
        this._allOptions.forEach((item) => {
          this.$refs.multipleTable.toggleRowSelection(item, true); // 设置新选择
        });
      } else {
        this.$refs.multipleTable.clearSelection(); // 取消全选
      }
    },
    toggleSelectAll(){
      let isAllSelected = this.getSelectedOptions().length >= this._allOptions.length;

      this.selectAll(!isAllSelected);
    },
    handleSelectionChange(val) {
      this._selectedRows = val;
      
      console.log('Current Selection:', JSON.stringify(this._selectedRows));

      // 如果需要同步其他地方显示，则在此处进行相应处理
    }
  }
};
</script>

上述代码展示了如何在一个基于 Vue.js 的应用里使用 Element UI 库下的 `el-table` 来完成跨分页情况下的全选及批量删除等功能。注意这里的例子假设每一页都加载了完整的数据集以便于演示目的，在实际开发过程中可能还需要考虑更复杂的场景比如异步获取远程服务器上的分页数据等情形。