el-table 一键全选功能

`el-table` 是 Element UI 提供的一个用于数据表格展示的组件，它内置了丰富的功能，包括一键全选。在 `el-table` 中实现一键全选通常是通过 `selection-mode` 属性来控制的。以下是一键全选功能的基本实现步骤：

1. **设置 selection-mode**：首先在 `<el-table>` 标签中启用选择模式，例如 `selection-mode="single"`（单选）、`"multiple"`（多选）或 `"all"`（全选）。

<el-table :selection-mode="SelectionMode">
  ...
</el-table>

其中，`SelectionMode` 可以根据需求设置为 `'single'`、`'multiple'` 或 `'all'`。

2. **提供全选/取消全选按钮**：在表格头部或者侧边栏添加全选/取消全选的按钮，点击时调用 `table.toggleAllSelection()` 方法来切换所有行的选中状态。

<el-button @click="selectAll">全选</el-button>
<el-button @click="clearSelection">取消全选</el-button>

然后在 Vue 组件中定义方法：

export default {
  methods: {
    selectAll() {
      this.$refs.table.toggleAllSelection();
    },
    clearSelection() {
      this.$refs.table.clearSelection();
    },
  }
}

3. **引用表格组件**：确保在引用表格时，给表格元素添加 `ref` 属性以便后续操作，如 `ref="table"`。

完整代码示例：

<template>
  <el-table
    ref="table"
    :data="tableData"
    :selection-mode="SelectionMode"
  >
    <!-- 表格列定义 -->
  </el-table>
  <el-button @click="selectAll">全选</el-button>
  <el-button @click="clearSelection">取消全选</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...], // 假设这是你的表格数据
      SelectionMode: 'all', // 选择模式
    };
  },
  methods: {
    selectAll() {
      this.$refs.table.toggleAllSelection();
    },
    clearSelection() {
      this.$refs.table.clearSelection();
    },
  }
};
</script>