有关后端返回的是数字信息 但是前端需要显示字符串(汉字)的信息问题
场景是这样的:
我的后端返回的数据信息是数字 1,2,3 之类的,要求前端渲染数据的时候,分别对应着比如: 高级,中高级,初级这类信息。
解决方案
<el-table-column property="operatetype" label="操作类型" align="center" :formatter="operatetype"></el-table-column>
添加:formatter="operatetype"属性,之后在methods方法体编写对应的方法:其中:formatter=""所对应的值一定要和方法名一样,可以随意取,我这里就使用了对应的属性信息了~
//判断操作类型是哪一类 operatetype(row){ if(row.operatetype===1){ return "高级" }else if(row.operatetype===2){ return "中高级" }else if(row.operatetype===3){ return "初级" } }
另外 如果使用的不是表格 没办法绑定:formatter=比如使用<el-descriptions-item>该标签没有对应的格式化属性,怎么办呢,有办法!看下面:
<!-- 合同信息 -->
<el-card> <div slot="header" class="clearfix"> <span><h2>合同信息</h2></span> </div> <div class="text item"> <el-descriptions style="padding-left: 25px;" v-model="formInfo" > <el-descriptions-item label="合同类型:" > {{ contracttypeArr[formInfo.contractype] }} </el-descriptions-item> </el-descriptions> </div> </el-card> data(){ return:{ contracttypeArr: { 0: "通用合同", 1: "采购合同", 2: "销售合同", }, } }
以上信息 比如接口返回的合同类型是0、1、2 分别对应通用、采购、销售;这个时候我们可以构建一个字典数组,渲染的时候映射即可