el-table条件判断显示不同的背景颜色

在 Element UI 中的表格组件 `el-table` 中，你可以通过 `row-class-name` 属性来实现根据条件显示不同的背景颜色。具体步骤如下：

1. 在 `el-table` 标签上添加 `:row-class-name` 属性，并绑定一个函数或者直接写一个匿名函数。例如：

<el-table :data="tableData" :row-class-name="tableRowClassName">
  <!-- 表格列 -->
</el-table>

2. 在 Vue 实例中定义 `tableRowClassName` 函数，该函数接收一个参数 `row`，表示当前行的数据对象。在该函数中根据你的条件返回不同的类名。例如：

export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 25,
          gender: '男'
        },
        {
          name: '李四',
          age: 45,
          gender: '女'
        },
        {
          name: '王五',
          age: 60,
          gender: '男'
        }
      ]
    }
  },
  methods: {
    tableRowClassName(row) {
      if (row.age >= 60) {
        return 'bg-red';
      } else if (row.age >= 40 && row.age < 60) {
        return 'bg-yellow';
      } else {
        return 'bg-green';
      }
    }
  }
}

在上述代码中，我们在 Vue 实例中定义了一个 `tableRowClassName` 函数，该函数接收一个 `row` 参数，表示当前行的数据对象。在该函数中，我们根据不同的条件返回不同的类名，例如当 `row.age >= 60` 时，返回 `bg-red` 类名；当 `row.age >= 40 && row.age < 60` 时，返回 `bg-yellow` 类名；否则返回 `bg-green` 类名。

3. 在 CSS 样式表中定义不同的类名对应的背景颜色。例如：

.bg-red {
  background-color: #ffcccc;
}
.bg-yellow {
  background-color: #ffffcc;
}
.bg-green {
  background-color: #ccffcc;
}

在上述代码中，我们定义了三个不同的类名 `bg-red`、`bg-yellow` 和 `bg-green`，分别对应着不同的背景颜色。

通过上述步骤，你就可以在 Element UI 的表格组件 `el-table` 中实现根据条件显示不同的背景颜色了。