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;
}

注意事项

1. 使用@click.stop阻止radio的事件冒泡，避免触发两次选择
2. 高亮行样式需要与radio选中状态同步
3. 在大数据量情况下考虑性能优化，避免不必要的渲染
4. 移动端适配可能需要调整点击区域

以上方法可以根据具体项目需求进行调整和扩展，比如添加取消选择功能或与表单其他字段联动等。