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

背景

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

效果图

实现分析

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的值渲染该列

<el-table :data="tableData" border style="width: 100%" highlight-current-row>
        <el-table-column type="index" label="序号" width="80" align="center" fixed></el-table-column>
        <el-table-column
          v-for="item in tableColumn"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          show-overflow-tooltip
          :width="item.width"
          align="center"
        >
          <template slot-scope="scope">
            <!-- 偏差結果 -->
            <span v-if="item.status==='flag'">
              <el-tag
                :type="scope.row.deviationResult === 0 ? 'success' :scope.row.deviationResult === 1?'primary':'danger' "
                disable-transitions
              >{{scope.row.deviationResult === 0 ? '正常' :scope.row.deviationResult === 1?'超正差':'超负差'}}</el-tag>
            </span>
            <!-- 磅单编码 -->
            <a
              v-else-if="item.status==='link'"
              class="link"
              @click.prevent="linkToinfo(scope.row)"
            >{{scope.row[item.prop]}}</a>
            <!-- 正常的其他列 -->
            <span v-else>{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right">
          <template slot="header" slot-scope="scope">
            <span>操作</span>
          </template>
          <template slot-scope="scope">
            <a href="#" class="link" @click.prevent="linkToinfo(scope.row)">查看详情</a>
          </template>
        </el-table-column>
      </el-table>

小结

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