elementui全选

使用 Element UI 实现表格全选功能

Element UI 的表格组件提供了全选功能，可以通过设置 selection 列和调用相关方法实现。以下是具体实现方式：

配置表格支持多选

在 el-table 上添加 @selection-change 事件监听，并设置 el-table-column 的 type 为 selection：

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

获取选中项数据

通过 handleSelectionChange 方法获取当前选中的行数据：

methods: {
  handleSelectionChange(val) {
    this.selectedRows = val;
  }
}

实现全选/取消全选

使用 toggleAllSelection 方法控制全选状态：

// 全选
this.$refs.table.toggleAllSelection();

// 取消全选
this.$refs.table.clearSelection();

设置默认选中项

如果需要默认选中某些行，使用 toggleRowSelection 方法：

this.tableData.forEach(row => {
  if (/* 选中条件 */) {
    this.$refs.table.toggleRowSelection(row, true);
  }
});

注意事项

1. 必须给表格设置 ref 属性才能调用方法
2. 分页情况下全选仅针对当前页数据
3. 跨页全选需要自行实现数据缓存逻辑

自定义全选逻辑实现

对于需要跨页全选等高级功能，可以结合以下方案：

添加全选复选框

在表格外添加一个控制全选的复选框：

<el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>

实现跨页选择

维护一个选中数据的数组：

data() {
  return {
    allSelectedRows: []
  }
},
methods: {
  handleSelectAll(isSelectAll) {
    if (isSelectAll) {
      // 获取所有数据并选中
      this.getAllData().then(data => {
        this.allSelectedRows = data;
        this.$nextTick(() => {
          data.forEach(row => {
            this.$refs.table.toggleRowSelection(row, true);
          });
        });
      });
    } else {
      this.allSelectedRows = [];
      this.$refs.table.clearSelection();
    }
  }
}

与分页组件配合

监听分页变化时清除全选状态：

handleCurrentChange() {
  this.selectAll = false;
}

以上方案可根据实际需求进行调整，Element UI 的表格选择功能提供了灵活的 API 来满足各种业务场景。