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

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

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

场景是这样的:

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


相关文章
|
30天前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
1月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
19 1
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
95 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
1月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
235 0
|
1月前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码?
圈子系统系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP
|
1月前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
128 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
1月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。