vue+element table实现对表格的某一列作特殊处理

背景

在表格渲染数据的时候，都需对某列比如偏差结果作特殊处理：
后台返回的数据为：0 ，1 ，-1
表格显示列为 ：正常，超正差，超负差
显示样式分别为 tag的：success primary danger

效果图

image.png

实现分析

1，准备表格渲染数据tableData
2，准备列字段，在需要特殊处理的列上添加特殊的字段
比如：磅单编号 添加字段status: "link"，偏差结果 status: "flag",
注意：不要忘了添加正常的列，在 v-else中

this.tableColumn = [
      {
        prop: "billQuantitySum",
        label: "运单数量",
        width: 100
      },
      {
        prop: "billTypeDisplay",
        label: "收料类型"
      },
      {
        prop: "specification",
        label: "规格型号"
      },
      {
        prop: "code",
        label: "磅单编号",
        width: 280,
        status: "link"
      },
      {
        prop: "carNumber",
        label: "车牌号"
      },
      {
        prop: "providerName",
        label: "发料单位",
        width: 280
      },
      {
        prop: "realQuantitySum",
        label: "实际质量"
      },

      {
        prop: "djly",
        label: "单据来源"
      },
      {
        prop: "completionTime",
        label: "完成时间",
        width: 200
      },
      {
        prop: "deviationResult",
        label: "偏差結果",
        status: "flag"
      }
    ];

在模板中通过判断status的值渲染该列

小结

写的不好的地方或者您有更好的方法可以一起讨论