若依在表格中如何将字典的键值转为中文

文章目录

一、需求:

后端有时候返回的是字典的键值,在前端展示时需要转成中文值

后端返回的是dictValue,现在要转换成这个dictLabel

对应的字典:

返回的是键值,我们需要转换为键值对应的中文

最终效果

在表格中展示需要转换为中文

二、问题解决

使用element ui表格中自带的formatter的属性来进行实现,是专门用来格式化内容的。
elementui 官网链接

步骤
1、给需要转换的列绑定formatter属性
2、获取字典项

字典的使用可以看这篇:
若依的字典值如何使用(超详细图文教程)

3、编写formatter属性绑定的方法

row参数是表格中当前行的内容

遍历字典项,从字典项中筛选对应的中文,然后返回对应的label值(也就是选项所展示的中文)

后端返回的表格中的值绑定在classGrade属性,这个属性在字典中对应的属性是dictValue,所以将这两个属性值进行对比,找到对应的字典项。

js 复制代码
    formatterDict(row){

      //根据年级的值 从字典中查找对应的字典项
      let obj=this.classListOption.find(item=>{
        return item.dictValue==row.classGrade;
      })

      if(obj!=undefined || obj!=null){
        return obj.dictLabel;
      }

    },

表格的每一行都会自动调用这个formatter方法

这样最终就能实现转换的效果了

相关推荐
瓯雅爱分享12 小时前
Java+Vue构建的采购招投标一体化管理系统,集成招标计划、投标审核、在线竞价、中标公示及合同跟踪功能,附完整源码,助力企业实现采购全流程自动化与规范化
java·mysql·vue·软件工程·源代码管理
苏打水com16 小时前
前端框架深度解析:Vue 从入门到实战,掌握渐进式开发核心
vue
棋子一名1 天前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
苏打水com1 天前
前端框架深度解析:Vue.js 3 从 Composition API 到生态升级,解锁企业级开发新能力
vue
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
小灰灰的可爱无人可替代2 天前
记录一次使用docker和docker-compose更新vue前端项目问题
nginx·docker·vue
java水泥工3 天前
酒店客房管理系统|基于SpringBoot和Vue的酒店客房管理系统(源码+数据库+文档)
spring boot·vue·酒店管理系统·酒店客房管理系统
爱看书的小沐4 天前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
知识分享小能手5 天前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
知识分享小能手6 天前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue