e-table 单选
时间: 2025-05-10 11:45:36 浏览: 12
### 如何在 `el-table` 中实现单选功能
为了实现在 `el-table` 组件中仅能选择一行的功能,可以采用多种方法。一种常见的方式是在每一行前放置一个单选按钮,并通过事件处理函数来控制哪一行被选中。
#### 方法一:使用 `@row-click` 和 `<el-radio>` 结合
这种方法利用了 Vue 的双向绑定特性以及 Element Plus 提供的组件库[^1]:
```html
<template>
<div id="app">
<el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">
<!-- 单选列 -->
<el-table-column align="center" label="选择">
<template slot-scope="scope">
<el-radio
:key="scope.row.id"
v-model="selectedId"
class="radio"
:label="scope.row.id"
>
</el-radio>
</template>
</el-table-column>
<!-- 其他数据展示列... -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 'id1', name: '张三' },
{ id: 'id2', name: '李四' }
],
selectedId: ''
};
},
methods: {
handleRowClick(row) {
this.selectedId = row.id; // 更新选中的ID
}
}
};
</script>
```
此代码片段展示了如何监听行点击事件并更新所选项的状态变量 `selectedId` 来达到单选效果。
#### 方法二:基于多选表头改造为单选模式
另一种思路是从官方文档提供的多选例子出发,在逻辑层面做适当调整使其变为单选行为[^3]。这种方式不需要额外引入新的控件,而是通过对已有 API 进行定制化配置完成需求转换。
对于这两种方案而言,核心在于维护好当前唯一有效的选择状态,并确保每次新选择都会清除之前的旧标记。
阅读全文
相关推荐





