二次封装el-table，调用row-class-name方法

简单封装表格组件 myTable.vue

<template>
  <div>
    <el-table
      ref="tableRef"
      :data="data"
      header-align="center"
      align="center"
      border
      :max-height="maxHeight"
      :height="tableHeight"
      :header-cell-style="{ background: '#FAF9F8' }"
      :highlight-current-row="highlightCurrentRow"
      sortable
      tooltip-effect="light"
      @row-click="rowClick"
      @row-dblclick="dblClick"
      @select="handleSelect"
      @select-all="handleSelect"
      :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>

引入myTable组件

<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>