vue 实现表格单选

实现表格单选的基本思路

在Vue中实现表格单选功能，通常需要结合表格组件（如el-table）和数据绑定。核心逻辑是通过点击事件更新当前选中行的唯一标识（如id），并通过:class或:style绑定高亮样式。

基于Element UI的实现示例

假设使用Element UI的el-table组件，以下是一个完整的实现示例：

<template>
  <el-table
    :data="tableData"
    @row-click="handleRowClick"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        id: 1
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        id: 2
      }],
      selectedRowId: null
    }
  },
  methods: {
    handleRowClick(row) {
      this.selectedRowId = row.id;
    }
  }
}
</script>

添加高亮样式

通过row-class-name属性实现选中行的高亮效果：

<el-table
  :data="tableData"
  @row-click="handleRowClick"
  :row-class-name="tableRowClassName"
  style="width: 100%">
  <!-- 列定义 -->
</el-table>

methods: {
  tableRowClassName({ row }) {
    return row.id === this.selectedRowId ? 'selected-row' : '';
  }
}

.el-table .selected-row {
  background-color: #f0f9eb;
}

使用计算属性优化

若需频繁访问选中行数据，可通过计算属性实现：

computed: {
  selectedRow() {
    return this.tableData.find(item => item.id === this.selectedRowId);
  }
}

纯Vue的实现方式（不依赖UI库）

对于原生HTML表格，可通过以下方式实现：

<table>
  <tr
    v-for="item in tableData"
    :key="item.id"
    @click="selectedRowId = item.id"
    :class="{ active: selectedRowId === item.id }">
    <td>{{ item.date }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.address }}</td>
  </tr>
</table>

.active {
  background-color: #42b983;
  color: white;
}

关键注意事项

• 确保每行数据具有唯一标识符（如id）
• 高亮样式建议使用CSS伪类:hover增强用户体验
• 对于大型表格，考虑使用v-once优化未选中行的渲染性能
• 单选状态应存储在Vx（如Vuex）中（跨组件场景）