将el-table表行颜色根据属性值自定义样式

在Vue.js中使用Element UI的el-table组件时，可以通过使用row-class-name这个属性来根据行的属性值来自定义行的颜色。

以下是一个简单的例子，演示如何根据行数据中的rowIndex属性来设置不同的行颜色：

<template>
  <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column label="序号" type="index" width="90" align="center" />
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="物品" width="180" />
    <el-table-column prop="status" label="状态" />
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2024-05-02',
        name: '鸡肉卷',
        status: 'success'
      }, {
        date: '2024-05-04',
        name: '兵马俑',
        status: 'danger'
      }, {
        date: '2024-05-01',
        name: '肉夹馍',
        status: 'warning'
      }, {
        date: '2024-05-03',
        name: '大葱煎饼',
        status: 'success'
      }]
    }
  },
  methods: {
       tableRowClassName({ row, rowIndex }) {
          // 根据行索引设置不同的class名
          if (rowIndex % 2 === 0) {
            return 'even-row';
          } else {
            return 'odd-row';
          }
    }
  }
}
</script>
 
<style>

/* 偶数行背景色 */
::v-deep tr.el-table__row.even-row {
  background-color: #012851 !important;
}

/* 奇数行背景色 */
::v-deep tr.el-table__row.odd-row {
  background-color: #05457d !important;
}

</style>

在上面的例子中，tableRowClassName方法根据行数据中的rowIndex属性返回不同的类名。然后在CSS中定义了相应的样式。这样表格中的行颜色就会根据rowIndex的值变化。

配上例图：

如还有相关问题可以在评论区提问讨论。