vue表格实现单选框
实现 Vue 表格单选框的方法
在 Vue 中实现表格单选框可以通过自定义逻辑或结合第三方组件库完成。以下是两种常见实现方式：
使用原生 HTML 和 Vue 数据绑定
通过 v-model 绑定单选值，结合 v-for 渲染表格行：
<template>
<table>
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>
<input
type="radio"
v-model="selectedItem"
:value="item.id"
@change="handleSelect"
>
</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
selectedItem: null,
tableData: [
{ id: 1, name: '张三', age: 25 },
{ id: 2, name: '李四', age: 30 }
]
}
},
methods: {
handleSelect() {
console.log('选中项ID:', this.selectedItem);
}
}
}
</script>使用 Element UI 组件库
若项目中使用 Element UI，可直接使用其表格单选功能：
<template>
<el-table
:data="tableData"
highlight-current-row
@current-change="handleSelect"
style="width: 100%">
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="age"
label="年龄">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 25 },
{ id: 2, name: '李四', age: 30 }
]
}
},
methods: {
handleSelect(val) {
console.log('选中行数据:', val);
}
}
}
</script>关键注意事项
- 数据绑定需确保
v-model或组件事件能正确更新选中状态 - 表格数据需包含唯一标识字段（如
id）用于区分选项 - 样式调整可能需要额外 CSS 覆盖默认的单选框外观
两种方式均可实现单选功能，原生方式更适合轻量需求，组件库方式则提供更完善的交互样式。
