vue根據數字顯示對應的文字狀態（vue三元表達式多個判斷）

第一種：（三元表達式多個判斷）

   <el-table-column
          align="center"
          prop="type"
          label="處置類型"
          style="width: 10%"
        >
          <template slot-scope="scope">
            {{
              scope.row.type == 1
                ? "線下加油"
                : scope.row.type == 2
                ? "充值油卡"
                : scope.row.type == 3
                ? "掃碼加油"
                : scope.row.type == 4
                ? "轉售"
                : scope.row.type == 5
                ? "續持"
                : scope.row.type == 6
                ? "退款"
                : ""
            }}</template
          >
        </el-table-column>

顯示樣式：

 

第二種：

  <el-table-column  label="模板類型">
          <template slot-scope="scope">
                 {{options[scope.row.SiteType]['label']}}
          </template>
      </el-table-column>

computed:{
    computedSiteType(){
        return function(siteType){
            return this.options[siteType]['label']
        }
    },
}

 data(){
  options: [
    {
        value: "0",
        label: "全部"
    },
    {
        value: "1",
        label: "PC版"
    },
    {
        value: "2",
        label: "手機版"
    }...
  ],

顯示樣式：