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

一、需求:

后端有时候返回的是字典的键值,在前端展示时需要转成中文值
在这里插入图片描述

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

在这里插入图片描述

对应的字典:

返回的是键值,我们需要转换为键值对应的中文
在这里插入图片描述

最终效果

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

在这里插入图片描述

二、问题解决

使用element ui表格中自带的formatter的属性来进行实现,是专门用来格式化内容的。
elementui 官网链接
在这里插入图片描述

步骤
1、给需要转换的列绑定formatter属性

在这里插入图片描述

2、获取字典项

字典的使用可以看这篇:
若依的字典值如何使用(超详细图文教程)在这里插入图片描述

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

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

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

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

    formatterDict(row){
   

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

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

    },

表格的每一行都会自动调用这个formatter方法
这样最终就能实现转换的效果了
在这里插入图片描述

最近更新

  1. TCP协议是安全的吗?

    2024-01-13 09:00:05       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-13 09:00:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-13 09:00:05       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-13 09:00:05       20 阅读

热门阅读

  1. Redis 持久化有几种方式?

    2024-01-13 09:00:05       35 阅读
  2. 在Linux中创建文件的简单教程

    2024-01-13 09:00:05       34 阅读
  3. 【记录 bpftrace】

    2024-01-13 09:00:05       40 阅读
  4. node连接Mysql失败

    2024-01-13 09:00:05       36 阅读
  5. Dubbo的服务降级策略剖析

    2024-01-13 09:00:05       42 阅读
  6. vue表格插件vxe-table导出 excel

    2024-01-13 09:00:05       41 阅读
  7. Spark十:故障排除

    2024-01-13 09:00:05       32 阅读
  8. static关键字的作用

    2024-01-13 09:00:05       43 阅读
  9. C语言-蓝桥杯算法提高VIP-产生数

    2024-01-13 09:00:05       36 阅读