vue 实现表格单选
Vue 实现表格单选的方法
使用 v-model 绑定选中项
通过 v-model 绑定一个变量来记录当前选中的行数据。在表格的每一行添加单选按钮或点击事件来更新这个变量。
<template>
<table>
<tr v-for="item in tableData" :key="item.id" @click="selectedRow = item">
<td><input type="radio" :checked="selectedRow === item"></td>
<td>{{ item.name }}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
],
selectedRow: null
}
}
}
</script>使用计算属性优化
添加计算属性来判断当前行是否被选中，使模板更简洁。
<template>
<table>
<tr v-for="item in tableData" :key="item.id" @click="selectedRow = item"
:class="{ 'selected': isSelected(item) }">
<td><input type="radio" :checked="isSelected(item)"></td>
<td>{{ item.name }}</td>
</tr>
</table>
</template>
<script>
export default {
computed: {
isSelected() {
return (item) => this.selectedRow === item
}
}
}
</script>使用第三方组件库
若使用 Element UI 等组件库，可直接利用其提供的单选表格功能。
<template>
<el-table
:data="tableData"
@current-change="handleCurrentChange"
highlight-current-row>
<el-table-column prop="name" label="Name"></el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
handleCurrentChange(val) {
this.currentRow = val
}
}
}
</script>添加样式反馈
为选中行添加视觉反馈，提升用户体验。
.selected {
background-color: #f0f0f0;
}
tr:hover {
cursor: pointer;
}注意事项
- 确保每个数据项有唯一标识符（如 id）
- 考虑添加初始选中状态逻辑
- 移动端适配可能需要调整点击区域大小
- 大型表格需考虑性能优化
