vue中将后台返回的数字转换成对应的文字
vue中将后台返回的数字转换成对应的文字
·
在前后端交互的过程中经常会遇到的一个问题,就是后端返回的是数字,前端页面例如类别一栏里应展示文字,前端就必须把后端传的 0,1,2,3转化为文字展示在页面上。
有以下解决方案:
首先用map遍历后台返回的数据利用里面的回调对数据进行解析即可,下面直接上代码
this.tableData.map(function (val) {
if (val.status == 0) {
val.status = '提交中'
} else if (val.status == 1) {
val.status = ‘招募中’
} else if (val.gender == 2) {
val.status = '已完成’
} else {
return ‘实施中’
}
})
this.tableData.forEach(item => {
if (item.status == 0) {
item.status = "冻结";
} else if (item.status == 1) {
item.status = "正常";
}
});
这样就可以在页面上显示了
第二种方法
<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>
3.直接写
<el-table-column prop="valucation" label="评估价值" width="200">
<template slot-scope="scope">
<span>
{{scope.row.valucation == 0 ?'司法评估‘ : ’内部评估‘}}
</span>
</template>
</el-table-column>
更多推荐
已为社区贡献1条内容
所有评论(0)