element表格组件el-table行设置背景颜色

在Element UI的el-table组件中，可以通过row-class-name属性来设置行的背景颜色。你需要在你的Vue组件中定义一个方法，该方法会根据你的条件返回一个包含背景颜色类名的对象。

下面是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    row-class-name="tableRowClassName"
  >
    <!-- 你的表格列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 你的数据数组
      ]
    };
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) { // 假设你想要设置第二行的背景颜色
        return 'background-color-row';
      }
      return '';
    }
  }
};
</script>
 
<style>
/* 在CSS中定义背景颜色 */
.background-color-row {
  background-color: #f2f2f2; /* 你想要的颜色 */
}
</style>

在上面的代码中，tableRowClassName方法返回了一个字符串，该字符串是一个CSS类名。在CSS部分，你需要定义这个类名的样式，即背景颜色。Element UI会自动将这个类添加到对应行的<tr>元素上。如果你想为不同的行设置不同的颜色，你可以在这个方法中添加更多的条件判断。