### 如何在
Element UI 的 `el
-table` 组件中实现
多选并判断是否全
选
在
Element UI 中，`el
-table` 提供了内置的
多选功能。要实现全
选逻辑以及动态判断当前页面的数据是否全部被
选中，可以通过监听
表格的
选择事件和计算已
选项的数量来完成。
以下是具体的实现方式：
#### 1. 使用 `@selection
-change` 监听
选择变化
通过绑定 `@selection
-change` 事件，可以在用户每次改变
选择状态时获取到最新的已
选中的行列表。这有助于实时更新全
选的状态。
```vue
<template>
<el
-table
ref="multiple
Table"
:data="
tableData"
@selection
-change="handleSelectionChange"
style="width: 100%">
<el
-table-column
type="selection"
width="55">
</el
-table-column>
<el
-table-column
prop="name"
label="名称"
width="120">
</el
-table-column>
<!
-- 更
多列
-->
</el
-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三' },
{ name: '李四' }
],
multipleSelection: [] // 存储当前
选中的行
};
},
methods: {
handleSelectionChange(selection) {
this.multipleSelection = selection;
},
isAllSelected() {
const totalRows = this.
tableData.length;
const selectedRows = this.multipleSelection.length;
return totalRows === selectedRows && totalRows > 0; // 判断是否全
选
}
}
};
</script>
```
上述代码实现了以下功能：
- 当用户更改
选择时，触发 `handleSelectionChange` 方法，并将最新
选中的行存储到 `multipleSelection` 数组中[^1]。
- 定义了一个辅助方法 `isAllSelected()` 来判断当前页面的所有数据是否已被
选中[^2]。
#### 2. 动态显示全
选按钮的
文字提示
如果希望进一步优化用户体验，可以结合
CSS 自定义
表头的内容，在全
选状态下替换默认的
多选框为
文字提示（如“取消全
选”）。具体做法如下：
##### 修改样式隐藏原生
多选框
利用深浅作用域 `/deep/` 或者 `::v
-deep` 调整 `.el
-table` 的内部结构，隐藏原有的
多选框并替换成自定义文案。
```
css
/* 替换
多选框 */
.el
-table /deep/.custom
-selection .cell .el
-checkbox__inner {
display: none !important;
}
.el
-table /deep/.custom
-selection .cell:before {
content: attr(data
-text); /* 动态设置文案 */
position: absolute;
top: 50%;
transform: translateY(
-50%);
}
```
##### Vue 实现动态切换文案
根据 `isAllSelected()` 的返回值决定是否展示“全
选”或“取消全
选”。
```vue
<template>
<div>
<el
-table
class="custom
-selection"
:class="{ allSelected: isAllSelected() }"
:data="
tableData"
@selection
-change="handleSelectionChange"
style="width: 100%">
<el
-table-column
type="selection"
width="55">
</el
-table-column>
<el
-table-column
prop="name"
label="名称"
width="120">
</el
-table-column>
</el
-table>
</div>
</template>
<style scoped>
.allSelected.custom
-selection .cell:before {
content: "取消全
选";
}
.custom
-selection .cell:before {
content: "全
选";
}
</style>
```
此部分代码的作用在于：
- 如果检测到所有项都被
选中，则应用类名 `allSelected` 并修改文案为“取消全
选”。反之则保持默认文案“全
选”[^3]。
#### 总结
以上方案展示了如何基于
Element UI 的 `el
-table` 组件实现
多选功能的同时支持全
选逻辑判断，并提供了灵活的方式来自定义
表头的行为与外观。
---
本文介绍如何在Element UI的Table组件中，为多选框checkbox后添加文字，如'全选'，并提供CSS样式代码实现这一效果。
扫一扫
6903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
