vue中表格实现单选

实现表格单选的基本思路

在Vue中实现表格单选功能，可以通过数据绑定和事件监听完成。核心是维护一个选中项的数据状态，并通过点击事件更新该状态。

使用v-model绑定选中项

在数据中定义selectedItem变量存储当前选中项，通过v-model或:class绑定高亮样式：

data() {
  return {
    tableData: [...], // 表格数据
    selectedItem: null // 当前选中项
  }
}

<tr v-for="item in tableData" 
    :class="{ 'active': selectedItem === item }"
    @click="selectedItem = item">
  <td>{{ item.name }}</td>
  ...
</tr>

通过计算属性控制单选

使用计算属性确保始终只有一项被选中：

computed: {
  selectedItem: {
    get() { return this._selectedItem },
    set(newVal) {
      this._selectedItem = newVal === this._selectedItem ? null : newVal
    }
  }
}

使用第三方组件库

若使用Element UI等组件库，可直接利用内置单选功能：

<el-table
  :data="tableData"
  @current-change="handleCurrentChange"
  highlight-current-row>
  <el-table-column prop="name" label="姓名"></el-table-column>
  ...
</el-table>

methods: {
  handleCurrentChange(val) {
    this.currentRow = val
  }
}

样式优化建议

为选中行添加视觉反馈：

tr.active {
  background-color: #f5f7fa;
}
tr:hover {
  cursor: pointer;
}

注意事项

• 清除选中状态可通过this.selectedItem = null实现
• 若表格数据动态更新，需同步重置选中状态
• 移动端建议增加点击区域的响应范围