一. 背景

部分项目根据业务需求需要将表格中每行背景颜色根据指定字段判断展示

二. 实现流程

1.vue 代码文件样例

<template>  
  <eh-layout>  
    <div slot="center">  
      <eh-tabs :tabs.sync="tabs" ref="umppWorkOrderTabs">  
        <template slot="umppWorkOrder-select">  
          <x-grid  
            id="umppWorkOrder"  
            ref="umppWorkOrder"  
            :grid="workOrderGrid.grid"  
            :dataSource="workOrderGrid.dataSource"  
            :options="workOrderGrid.options"  
            class="grid-main"  
          ></x-grid>  
        </template>  
      </eh-tabs>  
    </div>  
  </eh-layout>  
</template>  
  
<script>  
export default {  
  name: "umppWorkOrder",  
  data() {  
    return {  
      tabs: [{ name: "umppWorkOrder-select", title: "工单查询" }],  
      workOrderGrid: {  
        dataSource: {  
          bean: "platform",  
          method: "select",  
          entity: "com.epichust.entity.UmppWorkOrder",  
        },  
        grid: {  
          columns: [  
            {  
              prop: "code",  
              label: "工单编码",  
              width: "140px",  
            },  
            {  
              prop: "qty",  
              label: "工单数量",  
              width: "100px",  
            },  
            {  
              prop: "proState",  
              label: "工单状态",  
              width: "100px",  
              formatter: ({ cellValue, row, col }) => {  
                if (row.proState == 0) {  
                  return "未开工";  
                } else if (row.proState == 1) {  
                  return "已开工";  
                } else if (row.proState == 3) {  
                  return "完工";  
                }  
              },  
            },  
            {  
              prop: "produCode",  
              label: "产品编码",  
              width: "140px",  
            },  
            {  
              prop: "produName",  
              label: "产品名称",  
              width: "140px",  
            },  
            {  
              prop: "plannedBeginDate",  
              label: "计划开始时间",  
              width: "140px",  
            },  
            {  
              prop: "plannedEndDate",  
              label: "计划结束时间",  
              width: "140px",  
            },  
          ],  
          defaultSort: {  
            prop: "code",  
            order: "desc",  
          },  
          pagination: {  
            pageSize: 15,  
            pageSizes: [15, 25, 50, 100, 200], // 页容量选项  
          },  
          "row-class-name"({ row, rowIndex }) {  
            // 当前工单开工状态为未开工
            // 计划开始日期超过当前日期则展示为红色警告
            // 计划开始日期等于当前日期则展示为黄色预警            
            if (row.proState == 0) {  
              if (new Date(row.plannedBeginDate) < new Date()) {  
                return "red";  
              } else if (new Date(row.plannedBeginDate) > new Date()) {  
                return "";  
              } else if (new Date(row.plannedBeginDate) == new Date()) {  
                return "yellow";  
              }  
            } else if (row.proState == 1) {  
              // 当前工单开工状态为开工  
              // 计划开始日期超过当前日期展示为绿色
              if (new Date(row.plannedBeginDate) < new Date()) {  
                return "green";  
              }  
            }  
          },  
        },  
        options: {  
          extraParamFields: {},  
        },  
      },  
    };  
  },  
  methods: {},  
};  
</script>  
  
<style  lang="scss"  scoped></style>

2. 主要背景颜色替换代码，目前支持 eh-grid 以及 x-grid 表格组件

"row-class-name"({ row, rowIndex }) {
    // 当前工单开工状态为未开工
    // 计划开始日期超过当前日期则展示为红色警告
    // 计划开始日期等于当前日期则展示为黄色预警
    if (row.proState == 0) {
         if (new Date(row.plannedBeginDate) < new Date()) {
            return "red";
         } else if (new Date(row.plannedBeginDate) > new Date()) {
            return "";
         } else if (new Date(row.plannedBeginDate) == new Date()) {
            return "yellow";
         }
    } else if (row.proState == 1) {
        // 当前工单开工状态为开工
        // 计划开始日期超过当前日期展示为绿色
        if (new Date(row.plannedBeginDate) < new Date()) {
           return "green";
        }
    }
},

3. 效果图如下