背景

在表格渲染數(shù)據(jù)的時候，都需對某列比如偏差結果作特殊處理：
后臺返回的數(shù)據(jù)為：0 ，1 ，-1
表格顯示列為 ：正常，超正差，超負差
顯示樣式分別為 tag的：success primary danger

效果圖

image.png

實現(xiàn)分析

1，準備表格渲染數(shù)據(jù)tableData
2，準備列字段，在需要特殊處理的列上添加特殊的字段
比如：磅單編號 添加字段status: "link"，偏差結果 status: "flag",
注意：不要忘了添加正常的列，在 v-else中

this.tableColumn = [
      {
        prop: "billQuantitySum",
        label: "運單數(shù)量",
        width: 100
      },
      {
        prop: "billTypeDisplay",
        label: "收料類型"
      },
      {
        prop: "specification",
        label: "規(guī)格型號"
      },
      {
        prop: "code",
        label: "磅單編號",
        width: 280,
        status: "link"
      },
      {
        prop: "carNumber",
        label: "車牌號"
      },
      {
        prop: "providerName",
        label: "發(fā)料單位",
        width: 280
      },
      {
        prop: "realQuantitySum",
        label: "實際質(zhì)量"
      },

      {
        prop: "djly",
        label: "單據(jù)來源"
      },
      {
        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>

小結

寫的不好的地方或者您有更好的方法可以一起討論