有关后端返回的是数字信息 但是前端需要显示字符串(汉字)的信息问题

简介: 有关后端返回的是数字信息 但是前端需要显示字符串(汉字)的信息问题

有关后端返回的是数字信息 但是前端需要显示字符串(汉字)的信息问题

场景是这样的:

我的后端返回的数据信息是数字 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 分别对应通用、采购、销售;这个时候我们可以构建一个字典数组,渲染的时候映射即可


相关文章
|
7月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
669 1
|
3月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
207 5
|
8月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
521 70
|
7月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
447 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
7月前
|
前端开发
前端使用正则表达式检查是否为十六进制字符串
前端使用正则表达式检查是否为十六进制字符串
192 6
|
6月前
|
人工智能 监控 前端开发
AI工具:前端与后端的终极对决?谁将成为新时代的宠儿?
深入探讨AI工具对前端和后端开发的具体影响、各自的机遇与挑战,并分析未来开发者如何驾驭AI,实现能力跃迁。
313 0
|
8月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
806 12
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1049 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
346 0
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架