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

文章目录

      • 一、需求:
      • 二、问题解决
        • 步骤
          • 1、给需要转换的列绑定formatter属性
          • 2、获取字典项
          • 3、编写formatter属性绑定的方法

一、需求:

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

后端返回的是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方法
这样最终就能实现转换的效果了
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/617617.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Git】本地仓库文件的创建、修改和删除

目录 一、基本信息设置 1、设置用户名2、设置用户名邮箱 二、Git仓库操作介绍 1、创建一个新的文件夹2、在文件内初始化git仓库(创建git仓库)3、向仓库中添加文件 1.创建一个文件2.将文件添加到暂存区3.将暂存区添加到仓库 4、修改仓库文件 1.修改文件2.…

java中数组

文章目录 java中数组思维导图数组数组概念 数组定义格式详解数组的访问 常见异常数组索引值越界异常:ArrayIndexOutOfBoundsException空指针异常:NullPointerException 案例例一打印A-Z和0-9例二数组转置输出 java中数组 思维导图 数组 数组概念 组就…

Java8常用新特性

目录 简介 1.默认方法 2..Lambda表达式 3.Stream API 4.方法引用 5.Optional类 简介 Java 8是Java编程语言的一个重要版本,引入了许多令人兴奋和强大的新特性。这些特性使得Java程序更加现代化、灵活和高效。让我们一起来探索一些Java 8的常用新特性吧&#…

Mac 下载 nvm 后执行nvm -v 命令报错 nvm: command not found

1、问题:Mac 使用命令下载nvm 成功后执行 nvm -v 查看,报错:nvm command not found 2、原因:可能是系统更新后,默认的 shell 是 zsh,所以找不到配置文件 3、解决:可添加编辑.bash_profile 和 …

Docker 安装部署

1、Docker 安装 ① 卸载docker,清空之前的docker文件 yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-selinux \docker-engine-selinux \docker-engine \docker-ce…

Spring Boot - Application Events 的发布顺序_ContextRefreshedListener

文章目录 Pre概述Code源码分析 Pre Spring Boot - Application Events 的发布顺序_ApplicationEnvironmentPreparedEvent 概述 Spring Boot 的广播机制是基于观察者模式实现的,它允许在 Spring 应用程序中发布和监听事件。这种机制的主要目的是为了实现解耦&#…

2024年最新软件测试面试题

Part1 1、你的测试职业发展是什么?【文末有面试文档免费领取】 测试经验越多,测试能力越高。所以我的职业发展是需要时间积累的,一步步向着高级测试工程师奔去。而且我也有初步的职业规划,前3年积累测试经验,按如何做…

Python——猜猜心里的数字(2)

1、数字随机产生,范围1-10 2、有三次机会猜数字通过三层嵌套 3、每次猜不中,提示大小 import random numrandom.randint(1,10) guess_num int(input("请输入您猜测的值:")) if guess_numnum:print("恭喜你,第一次…

【漏洞复现】Office365-Indexs-任意文件读取

漏洞描述 Office 365 Indexs接口存在一个任意文件读取漏洞,攻击者可以通过构造精心设计的请求,成功利用漏洞读取服务器上的任意文件,包括敏感系统文件和应用程序配置文件等。通过利用此漏洞,攻击者可能获得系统内的敏感信息,导致潜在的信息泄露风险 免责声明 技术文章…

LLM之长度外推(二)| Self-Extend:无需微调的自扩展大模型上下文窗口

论文链接:https://simg.baai.ac.cn/paperfile/a34ae7f4-f0ce-4f8f-b8f2-e8e4d84bbee5.pdf 目前大模型基本都采用transformer结构,而transformer中attention机制的计算复杂度与序列长度呈平方关系,因此大模型在训练时候通常会设置固定的上下文…

案例117:基于微信小程序的新闻资讯系统设计与实现

文末获取源码 开发语言:Java 框架:springboot JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder …

学习Vue封装的过渡与动画总结

今天学习了Vue封装的过渡与动画&#xff0c;接下来说一下Vue是如何实现的&#xff0c;首先原生的方法是在style元素中给指定元素添加过渡的过渡或动画&#xff0c;但Vue就不需要直接获取到需要过渡或动画的元素&#xff0c;而是使用一个<transition>的标签来包裹住想要过…

py的函数讲解

前言:本章节我们来讲函数&#xff0c;主播略微感觉到有点小难&#xff0c;友友们需要认真看 目录 一.初始函数 1.1关于函数 1.2举例 1.3小结 二.函数的基础语法 2.1关于函数的语法 2.2举例 2.3小结 三.函数的参数 3.1关于函数的参数 3.2举例 3.3小结 四.函数的返回…

如何在 SwiftUI 中实现音频图表

文章目录 前言DataPoint 结构体BarChartView 结构体ContentView 结构体实现协议实现线图总结 前言 在可访问性方面&#xff0c;图表是复杂的事物之一。iOS 15 引入了一项名为“音频图表”的新功能。 下面我们将学习如何通过使用 accessibilityChartDescriptor 视图修饰符为任…

用友NC Cloud IUpdateService接口存在XXE漏洞

免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 1. 用友NC 简介 微信公众号搜索:南风漏洞复现文库 该…

Shutter Encoder多媒体转换v17.8

软件介绍 多媒体包含种类繁多的各种文件格式&#xff0c;每种格式都有其不同的特征和所谓的“怪癖”。 因此&#xff0c;如果使用多种图像、视频或音频格式&#xff0c;找到一个集中的软件来从一个地方处理所有这些格式可能会非常棘手。 这就是 Shutter Encoder 基本上允许做的…

【算法】信使(最短路问题)

题目 战争时期&#xff0c;前线有 n 个哨所&#xff0c;每个哨所可能会与其他若干个哨所之间有通信联系。 信使负责在哨所之间传递信息&#xff0c;当然&#xff0c;这是要花费一定时间的&#xff08;以天为单位&#xff09;。 指挥部设在第一个哨所。 当指挥部下达一个命令…

硬盘重新分区怎么恢复分区之前的文件?

分区是常见的故障&#xff0c;通常由多种原因引起。一方面&#xff0c;硬盘老化或者受到损坏可能会导致分区表出现问题&#xff1b;另一方面&#xff0c;用户误操作&#xff0c;如格式化或分区不当&#xff0c;也可能导致分区丢失。针对此问题&#xff0c;解决方法包括使用专业…

# C++系列-第3章循环结构-28-累加

在线练习&#xff1a; http://noi.openjudge.cn/ https://www.luogu.com.cn/ 累加 奥运奖牌计数 题目描述 2008 2008 2008 年北京奥运会&#xff0c;A 国的运动员参与了 n n n 天的决赛项目 ( 1 ≤ n ≤ 100 ) (1 \le n \le 100) (1≤n≤100)。现在要统计一下 A 国所获得的…

虚拟机连接(与主机断开连接)U盘的按钮为灰色之解决方法

在WIN11中&#xff0c;虚拟机“连接(与主机断开连接)U盘”选项为灰色&#xff0c;解决方法如下&#xff1a; 1、关闭虚拟机电源&#xff0c;得到下面的界面&#xff1a; 2、根据上述提示&#xff0c;找到虚拟机所在磁盘 3、配置文件属性见下图&#xff1a; 4、使用记事本打开…