elementUI组件table表格点击一行更改颜色

要实现点击表格中的一行更改颜色，你可以通过以下的步骤来实现：

1. 在 `table` 组件上添加 `@row-click` 事件监听器，用于监听行的点击事件。
2. 在 `methods` 中定义一个 `handleRowClick` 方法，用于处理行的点击事件。
3. 在 `handleRowClick` 方法中，通过 `ref` 获取 `table` 组件，并使用 `setCurrentRow` 方法设置当前行，然后在 `rowStyle` 中设置样式来更改行的颜色。

以下是示例代码：

<template>
  <el-table :data="tableData" ref="table" @row-click="handleRowClick">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 },
        { name: '王五', age: 25 }
      ]
    }
  },
  methods: {
    handleRowClick(row) {
      // 设置当前行
      this.$refs.table.setCurrentRow(row)
    }
  },
  computed: {
    // 设置行样式
    rowStyle() {
      return (row) => {
        if (row === this.$refs.table.currentRow) {
          return { background: '#f2f2f2' }
        } else {
          return {}
        }
      }
    }
  }
}
</script>

在上述代码中，我们通过 `ref` 获取了 `table` 组件，并在 `handleRowClick` 方法中使用 `setCurrentRow` 方法来设置当前行。然后通过 `rowStyle` 计算属性设置行的样式，如果当前行与 `currentRow` 相等，则设置背景颜色为 `#f2f2f2`。最终实现了点击表格中的一行更改颜色的效果。