vue中将后台返回的数字转换成对应的文字
记录：因为工作需要，记录自己遇到的问题。
问题：解决前端展示的是汉字男女，而且0,1,2,对应不同的汉字这种类型的问题。
第一种方式：
:formatter=“statusFormatter” 主要是这个 ，格式化我们的数据
<el-table
:data="tableData"
border>
<el-table-column
prop="status"
:show-overflow-tooltip="true"
label="状态"
width="60"
:formatter="statusFormatter"
>
</el-table-column>
</el-table>
<script>
export default{
data(){
return{
tableData:[]
}
},
methods:{
statusFormatter(row, column){
const status = row.status
if (status == 0) {
return '正常'
} else if (status == 1) {
return '待审批'
} else if (status == 2) {
return '拒绝'
} else if (status == 3) {
return '锁定'
} else {
return '删除'
}
}
}
}
</script>
第二种方式：
根据字典进行数据转换
<el-col :span="10">
<el-form-item label="证件类型：">
<dict-tag :options="dict.type.b_merchant_info_lp_id_type" :value="merchantInfo.lpIdType" />
</el-form-item>
</el-col>
<el-table-column label="所在场景" align="center" key="merchantId">
<template slot-scope="scope">
<dict-tag :options="SceneName" :value="scope.row.merchantId"/>
</template>
</el-table-column>
dict.type.b_merchant_info_lp_id_type这个字典内容是结合ruoyi框架里面得到的。这个数据字典是后端里面拿到的
SceneName是自己创建的一个数组，字典的对应关系需要自己来创建对应。我遇到的问题是，通过后端查找数据出来，然后创建对应关系，当然，可以前端固化。
SceneName:[],
//得到场景名字
getSceneName() {
listBizgroup().then(response => {
response.rows.forEach(element => {
if (element.id && element.name) {
let obj = {};
obj["label"] = element.name;
obj["value"] = element.id;
obj["raw"] = {"listClass": "default"};
this.SceneName.push(obj);
}
});
})
第三种方式：
<el-table-column label="在线状态" align="center" prop="onlineStatus">
<template slot-scope="scope">
<el-tag type="success" effect="dark" v-if="scope.row.onlineStatus==1">在线</el-tag>
<el-tag type="danger" v-if="scope.row.onlineStatus==2">离线</el-tag>
<el-tag type="info" v-if="scope.row.onlineStatus==3">未知</el-tag>
</template>
</el-table-column>
