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);
}
});注意事项
- 必须给表格设置
ref属性才能调用方法 - 分页情况下全选仅针对当前页数据
- 跨页全选需要自行实现数据缓存逻辑
自定义全选逻辑实现
对于需要跨页全选等高级功能，可以结合以下方案：
添加全选复选框
在表格外添加一个控制全选的复选框：
<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 来满足各种业务场景。
