关于vue.js:element的table表格数据校验

当应用element的table时,后盾返回的状态是数字转态,咱们要把数字变成汉字
下边三种解决形式:
办法1:(直接判断值)

<el-table :data="tableData" stripe style="width: 100%">
    <el-table-column  label="状态" align="center">
         <template  slot-scope="scope">
            <span v-if="scope.row.type==1">启动</span>
             <span v-else-if="scope.row.type==2">暂停</span>
             <span v-else="scope.row.type==3">期待</span>
        </template>
    </el-table-column>
</el-table>

办法2:(formatter属性测验)

<el-table :data="tableData" stripe style="width: 100%">
    <el-table-column  label="状态" align="center" :formatter="formatter"> </el-table-column>
</el-table>

//应用
formatter(value){
  let type="";
  if(value==1){
        type="启动"
    }else if(value==2){
        type="暂停"
    }else if(value==3){
        type="期待"
    }
        return type;
    },
}

办法3:(filters过滤器)

<el-table :data="tableData" stripe style="width: 100%">
    <el-table-column  label="状态" align="center"> 
           <template  slot-scope="scope">
                   {{scope.row.type | types}}
        </template>
    </el-table-column>
</el-table>

//应用
filters:{
   types(value){
     let type="";
  if(value==1){
        type="启动"
    }else if(value==2){
        type="暂停"
    }else if(value==3){
        type="期待"
    }
        return type;
    },
   }
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理