二次封装el-table的:row-class-name

根据某个字段的值给该行背景设定不同的颜色

<template>
  <div>
    <el-table
      :row-class-name="getRow"
    >
    </el-table>
  </div>
</template>
 
<script>
export default {
  methods: {
    getRow({ row }) {
      let result = "";
      this.$emit('getRow',row,(val) => {
        result = val;
      })
      return result;
    },
  },
};
</script>
 
<style lang="less" scoped>
.el-table ::v-deep .warning-row {
  background: #ecf5ff !important;
}
</style>

第三个参数为回调函数

<template>
  <div>
    <myTable @getRow="tableRowClassName" :data="list"></myTable>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    tableRowClassName(row, callback) {
      //根据条件过滤显示高亮
      if (row.code == 123) {
        callback("warning-row");
      } else {
        callback("");
      }
    },
  },
};
</script>