el-table 单选 点击行
时间: 2025-05-15 22:50:10 浏览: 16
### 使用 `el-table` 实现单选功能
为了实现 `el-table` 单选功能并支持通过点击表格行来选择,可以利用 `highlight-current-row` 属性以及监听事件 `@current-change` 来完成操作。以下是完整的解决方案:
#### HTML 部分
```html
<template>
<div>
<el-table
ref="singleTable"
:data="tableData"
highlight-current-row
@current-change="handleCurrentChange">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
```
#### JavaScript 部分
```javascript
<script>
export default {
data() {
return {
tableData: [
{ date: '2023-10-01', name: '张三', address: '北京市' },
{ date: '2023-10-02', name: '李四', address: '上海市' },
{ date: '2023-10-03', name: '王五', address: '广州市' }
],
currentRow: null // 当前选中的行数据
};
},
methods: {
handleCurrentChange(val) {
this.currentRow = val;
console.log('当前选中的行:', this.currentRow);
}
}
};
</script>
```
上述代码实现了以下功能:
- 设置属性 `highlight-current-row` 启用高亮显示当前选中行的功能[^2]。
- 利用 `@current-change` 监听器捕获用户点击某一行的操作,并更新变量 `currentRow` 存储该行的数据。
如果需要进一步绑定额外逻辑到选中行为,则可以在 `handleCurrentChange` 方法中扩展业务处理逻辑[^3]。
---
#### 注意事项
当使用此方式时,请注意以下几点:
- 如果希望默认选中某一行,可以通过调用 `$refs.singleTable.setCurrentRow(row)` 方法手动设置初始选中状态。
- 若需禁用某些行的可选性,可通过自定义渲染单元格内容或条件判断控制交互效果。
---
阅读全文
相关推荐


















