vue表格选中一行变色

可以使用 Vue 的样式绑定（`v-bind:class`）来实现选中一行变色的效果。具体步骤如下：

1. 在表格行中绑定一个 `selected` 属性，用于表示该行是否被选中。

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list" :key="item.id" :class="{ selected: item.selected }" @click="selectRow(item)">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

2. 在 `selectRow` 方法中切换 `selected` 属性的值。

export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三', age: 18, gender: '男', selected: false },
        { id: 2, name: '李四', age: 20, gender: '女', selected: false },
        { id: 3, name: '王五', age: 22, gender: '男', selected: false },
      ],
    };
  },
  methods: {
    selectRow(item) {
      this.list.forEach((i) => {
        i.selected = i.id === item.id;
      });
    },
  },
};

3. 定义 `.selected` 样式，用于设置选中行的背景色等。

tr.selected {
  background-color: #f5f5f5;
}

这样，当用户点击某一行时，该行的 `selected` 属性会被切换，从而触发样式绑定，实现选中一行变色的效果。