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

8次阅读

共计 959 个字符，预计需要花费 3 分钟才能阅读完成。

当应用 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;
    },
   }
}

正文完