el-table勾选行
时间: 2025-01-15 21:15:01 浏览: 68
### 实现 Element UI `el-table` 组件中的行勾选功能
为了实现在 `el-table` 中的行勾选功能,可以利用Element UI提供的内置属性和方法来完成这一需求。下面是一个详细的说明以及代码示例。
#### 行勾选的基础配置
通过设置 `el-table-column` 的 `type="selection"` 属性可以在表格左侧添加一个多选框列用于选择每一行的数据[^3]:
```html
<template>
<div id="app">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<!-- 剩余表头定义 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
// 更多数据项...
],
multipleSelection: []
}
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>
```
此段代码展示了如何创建一个带有可选项的表格,并监听选择了哪些行的变化事件以便后续处理这些被选中的记录。
#### 处理特殊情况下某些行不可选
如果希望部分特定条件下的行不参与勾选操作,则可以通过自定义函数控制每行的选择状态。这通常涉及到使用 `selectable` 函数作为参数传递给 `el-table-column` 来决定某一行是否允许被用户点击其前面的小方块来进行选择:
```html
<el-table-column type="selection" width="55" :selectable="checkSelectable"></el-table-column>
```
对应的 JavaScript 方法如下所示:
```javascript
methods: {
checkSelectable(row, index){
// 返回false表示该行不允许被选中;返回true则相反。
return row.name !== "Not Selectable";
}
}
```
上述逻辑可以根据实际业务场景调整判断依据,比如基于某个字段值的不同而改变行为。
#### 获取已选中的所有项目列表
当需要获取到目前已被打钩标记出来的那些条目时,可以直接访问之前提到过的 `this.multipleSelection` 数组变量即可获得最新的集合信息。这个数组会随着用户的交互自动更新,因此无需额外编写复杂的同步机制。
---
阅读全文
相关推荐

















