el-table操作按钮点击时改变该行的背景色

在Vue的Element UI库中，el-table组件可以方便地处理表格数据的显示和交互。如果你想在操作按钮点击时改变对应行的背景色，你可以通过v-bind:class绑定一个自定义的CSS类名，并在事件处理器中更新这个类名的状态。

首先，在CSS中定义一个用于高亮的类，例如：

.highlight-row {
  background-color: #f5f5f5; /* 或者你喜欢的其他颜色 */
}

然后在Vue模板中使用el-table的`row-class-name`属性，结合v-on:click监听按钮的点击事件：

<template>
  <el-table :data="tableData" highlight-current-row>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄">
      <template slot-scope="scope">
        <!-- 操作列 -->
        <el-button type="primary" @click="changeRowColor(scope.$index)">
          操作
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 24 },
        // ...
      ],
      currentRowHighlight: false,
    };
  },
  methods: {
    changeRowColor(index) {
      this.currentRowHighlight = !this.currentRowHighlight;
      // 更新当前行的class，如果currentRowHighlight为true，则应用highlight-row
      this.tableData[index].rowClass = this.currentRowHighlight ? 'highlight-row' : '';
    }
  },
};
</script>

当你点击操作按钮时，`changeRowColor`方法会被调用，它会切换`currentRowHighlight`的状态，并相应地更改表格数据中指定行的`rowClass`，从而改变背景颜色。