vue + iview 表格状态进度不同颜色的展示

要实现的效果：

实现思路：在data的columns设置render返回h数组：

代码实现：

columns: [
  {
    title: "状态",
    key: "state",
    align: "center",
    width: 250,
    render: (h,params) => {
      let s1 = '待找回';
      let s2 = '→' + '分片搜集中';
      let s3 = '→' + '待计算';
      let s4 = '→' + '已找回';
      let str = params.row.state;
      if (str === '1') {
        return h('div', [
          h('span', {
            style: {
              color: '#66CC66'
            }
          }, s1),
          h('span', {
            style: {
              color: '#333'
            }
          }, s2 + s3 + s4)
        ])
      } else if (str === '2') {
        return h('div', [
          h('span', {
            style: {
              color: '#66CC66'
            }
          }, s1 + s2),
          h('span', {
            style: {
              color: '#333'
            }
          }, s3 + s4)
        ])
      } else if (str === '3') {
        return h('div', [
          h('span', {
            style: {
              color: '#66CC66'
            }
          }, s1 + s2 + s3),
          h('span', {
            style: {
              color: '#333'
            }
          }, s4)
        ])
      } else {
        return h('div', [
          h('span', {
            style: {
              color: '#66CC66'
            }
          }, s1 + s2 + s3 + s4)
        ])
      }
    }
  },
  {
    title: "发起时间",
    key: "create_time",
    align: "center",
    width: 150,
    render: (h, params) => {
      return h(
        "div",
        this.formatDate(params.row.create_time)
      );
    }
  },
  {
    title: '操作',
    align: 'center',
    render: (h, params) => {
      return h('div', [
        h('button', {
          on: {
            click: () => {
              // 这里通常做路由跳转，弹窗显示，发送请求等
              this.btnClick(params.row);
            }
          },
          style: {
            fontSize: '12px',
            padding: '5px 12px',
            cursor: 'pointer',
            color: '#fff',
            backgroundColor: '#2d8cf0',
            outline: 0,
            borderColor: '#2d8cf0',
            borderRadius: '4px',
            border: '1px solid transparent'
          }
        }, params.row.state === '1' ? '找回密钥' : params.row.state === '2' ? '输入分片' :
          params.row.state === '3' ? '计算' : '查看结果'),
      ]);
    }
  }
],