vue表格选中一行变色

在 Vue 中，可以使用 `v-bind:class` 指令来动态绑定 CSS 类。因此，可以通过监听表格行的点击事件来改变行的 CSS 类。

以下是一个简单的示例：

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="index" 
        v-bind:class="{ 'selected': selectedIndex === index }"
        @click="selectRow(index)">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.email }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'John', age: 30, email: 'john@example.com' },
        { name: 'Alice', age: 25, email: 'alice@example.com' },
        { name: 'Bob', age: 35, email: 'bob@example.com' }
      ],
      selectedIndex: -1
    };
  },
  methods: {
    selectRow(index) {
      this.selectedIndex = index;
    }
  }
};
</script>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
tr.selected {
  background-color: yellow;
}
</style>

在上面的代码中，我们定义了一个表格，表格中的每一行都可以被点击选择。当用户点击一行时，我们将 `selectedIndex` 设置为当前行的索引。然后，在每一行的 `v-bind:class` 中，我们检查当前行的索引是否等于 `selectedIndex`，如果是，则添加名为 `selected` 的 CSS 类，以改变行的颜色。