vue前端table实现单选
实现单选表格的基本思路
在Vue中实现表格的单选功能，可以通过绑定数据模型和事件处理来完成。核心是维护一个选中项的数据状态，并通过点击事件更新该状态。
基础实现方法
模板部分
<template>
<table>
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in tableData"
:key="index"
@click="selectRow(item)"
:class="{ 'selected': selectedItem === item }"
>
<td>
<input
type="radio"
:checked="selectedItem === item"
@click.stop
>
</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</template>脚本部分
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 25 },
{ name: '李四', age: 30 },
{ name: '王五', age: 28 }
],
selectedItem: null
}
},
methods: {
selectRow(item) {
this.selectedItem = item
}
}
}
</script>使用计算属性优化
可以添加计算属性来判断是否选中，使逻辑更清晰：
computed: {
isSelected() {
return (item) => this.selectedItem === item
}
}模板中使用：
:class="{ 'selected': isSelected(item) }"
:checked="isSelected(item)"使用第三方组件库的实现
如果使用Element UI等组件库，实现更简单：
<el-table
:data="tableData"
@current-change="handleCurrentChange"
highlight-current-row
>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>methods: {
handleCurrentChange(val) {
this.selectedItem = val
}
}样式优化建议
添加选中样式提升用户体验：
tr.selected {
background-color: #f0f7ff;
}
tr:hover {
cursor: pointer;
background-color: #f5f5f5;
}注意事项
- 使用
@click.stop阻止radio的事件冒泡，避免触发两次选择 - 高亮行样式需要与radio选中状态同步
- 在大数据量情况下考虑性能优化，避免不必要的渲染
- 移动端适配可能需要调整点击区域
以上方法可以根据具体项目需求进行调整和扩展，比如添加取消选择功能或与表单其他字段联动等。
