Vue+iview 表格内数据状态不同，数据显示不同样式

效果图：

**

方法一：render

**

<template>
  <div class="render-conainer">
    <Table stripe :columns="columns1" :data="data1" class="showddlist"></Table>
  </div>
</template>
<script>
export default {
    
  data() {
    
    return {
    
      columns1: [
        {
    
          title: "订单名",
          key: "name",
        },
        {
    
          title: "工件类型",
          key: "type",
        },
        {
    
          title: "车工序",
          key: "g1",
          render: (h, params) => {
    
            if (params.row.g1 === "未开始") {
    
              return h(
                "span",
                {
    
                  style: {
    
                    color: "#FC857F",
                  },
                },
                params.row.g1
              );
            } else if (params.row.g1 === "进行中") {
    
              return h(
                "span",
                {
    
                  style: {
    
                    color: "#41C3FF",
                  },
                },
                params.row.g1
              );
            } else {
    
              return h("span", {
    }, params.row.g1);
            }
          },
        },
        {
    
          title: "铣工序",
          key: "g2",
          render: (h, params) => {
    
            if (params.row.g2 === "未开始") {
    
              return h(
                "span",
                {
    
                  style: {
    
                    colo