el-table被点击行添加背景颜色

在Vue.js中使用Element UI库时，可以通过监听el-table的row-click事件来给被点击的行添加背景色。以下是一个简单的示例：

<template>
  <el-table
    :data="tableData"
    @row-click="handleRowClick"
  >
    <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 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '孙小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    };
  },
  methods: {
    handleRowClick(row, column, event) {
      // 先移除之前的背景色
      this.$refs.table.$el
        .querySelectorAll('.el-table__row.active')
        .forEach(row => row.classList.remove('active'));
 
      // 给当前行添加背景色
      event.target.classList.add('active');
    }
  }
};
</script>
 
<style>
/* 自定义的背景色类 */
.active {
  background-color: #f0f9eb !important;
}
</style>

在上述代码中，我们定义了一个handleRowClick方法来处理行点击事件。在这个方法中，我们首先移除表格中所有已经被添加active类的行（表示它们已经被选中），然后给当前点击的行添加active类。

注意，.active类的样式是可以根据你的需求自定义的。此外，:data="tableData"是表格数据的绑定，可以根据实际情况进行修改。

此代码示例假设你已经在项目中安装并配置了Element UI。如果没有，请先按照Element UI的安装指南进行操作。