美文网首页
vue表格el-table-column数据翻译字段

vue表格el-table-column数据翻译字段

作者: 0981b16f19c7 | 来源:发表于2019-07-25 15:06 被阅读0次

    问题背景:在做页面查询时,有一个状态位auth_status标志,后端返回的是代码,前端需要转译成对应的中文方便用户理解。

    解决方法1)使用:formatter

              <el-table-column label="认证状态" prop="auth_status" :formatter="statusFormat">
              </el-table-column>
    
    methods:{
          statusFormat(row,column){
            console.log(row.auth_status);
            var statusW;
            switch (row.auth_status) {
              case 120:statusW= "认证成功";break;
              case 110:statusW= "认证中";break;
              case 100:statusW= "未认证";break;
              case 130:statusW= "认证失败";break;
              case 140:statusW= "认证过期";break;
            }
            return statusW
          }
    }
    

    解决方法2)使用过滤器filters

              <el-table-column label="认证状态" prop="auth_status">
                <template slot-scope="scope">
                  {{ scope.row.auth_status | mystatus(scope.row.auth_status)}}
                </template>
              </el-table-column>
    
          filters:{
            mystatus(myInput){
              console.log(myInput);
              console.log("sdsd");
              var statusW;
              switch (myInput) {
              case 120:statusW= "认证成功";break;
              case 110:statusW= "认证中";break;
              case 100:statusW= "未认证";break;
              case 130:statusW= "认证失败";break;
              case 140:statusW= "认证过期";break;
              }
            return statusW
            }
          }
    

    相关文章

      网友评论

          本文标题:vue表格el-table-column数据翻译字段

          本文链接:https://www.haomeiwen.com/subject/aushrctx.html