当前位置: 首页 > news >正文

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

文章目录

      • 一、需求:
      • 二、问题解决
        • 步骤
          • 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方法
这样最终就能实现转换的效果了
在这里插入图片描述

相关文章:

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

文章目录 一、需求:二、问题解决步骤1、给需要转换的列绑定formatter属性2、获取字典项3、编写formatter属性绑定的方法 一、需求: 后端有时候返回的是字典的键值,在前端展示时需要转成中文值 后端返回的是dictValue,现在要转换…...

用笨办法-刻意练习来提高自己的编程能力

尝试了很多学习方法,企图快速提高编程能力,但最终发现,唯有老老实实刻意练习1,在辛苦与时间积累下,逐渐提升能力,才是最有效的方式。 将自己的笨办法总结了一下,主要包含7个步骤: …...

FineBI报表页面大屏小屏自适应显示问题

大屏正常显示 显示正常 小屏BI自适应显示 存在遮挡字体情况 小屏浏览器缩放显示 等比缩放后显示正常...

NAND Separate Command Address (SCA) 接口命令解读

CA output packet和CA input packet是Separate Command Address (SCA) NAND接口协议中用于命令和地址传输的关键数据结构。 CA Input Packet: 在SCA接口中,输入到NAND器件的命令和地址信息被组织成并行至串行转换的CA(Command and Address)输…...

Git的简单使用说明

Git入门教程 git的最主要的作用:版本控制,协助开发 一.版本控制分类 ​​ 1.本地版本控制 ​​ 2.集中版本控制 ​​ 所有的版本数据都存在服务器上,用户的本地只有自己以前所同步的版本,如果不连网的话,用户就看不…...

少儿编程 2023年12月电子学会图形化编程等级考试Scratch二级真题解析(判断题)

2023年12月scratch编程等级考试二级真题 判断题(共10题,每题2分,共20分) 26、声音Medieval1的长度是9.68秒,运行下列程序1或程序2都能实现,播放声音2秒后,声音停止角色移动100步 答案:对 考点分析:考查积木综合使用,重点考查声音积木的使用 程序1中用的是等待播完…...

前端面试 -- vue系列

Vue系列 1. vue理解:2. SPA(单页面应用理解)3. vue实例挂载的过程4. v-for和v-if优先级5. SPA首屏加载速度慢的原因和解决办法6. Vue中给对象添加新属性界面不刷新(直接给对象添加属性)7. vue组件之间的通信方式有哪些…...

open3d相关操作总结

open3d其实有很多交互式命令,在运行程序打开了open3d渲染的窗口后,鼠标点击窗口,按H就会弹出,交互命令的帮助,如下图所示: 其中比较常用的有: Q :退出当前窗口 H:打印帮…...

HTTP数据请求

文章目录 1 概述2 什么是HTTP3 如何发起HTTP请求4 参考链接 1 概述 日常生活中我们使用应用程序看新闻、发送消息等,都需要连接到互联网,从服务端获取数据。例如,新闻应用可以从新闻服务器中获取最新的热点新闻,从而给用户打造更…...

孩子兄弟结构体【】

#include <stdio.h> typedef int TElemType; typedef struct CSTNode {TElemType data;struct CSTNode* firstChild;struct CSTNode* nextSibling; }CSTNode,*CSTree;...

SSM-SpringMVC+Spring+Mybatis

创建项目 创建好 项目后, 项目目录分析 数据库设计 我们采用员工表 Employee 与 部门表 Department 部门表 表设计--- 员工表 --表设计 因为有文件上传操作,因此 建立 info表 (其中 员工只能隶属一个部门,因此 两张表之间 有外键关系) java 代码 设计 数据库建立完毕后,需要…...

系统存储架构升级分享 | 京东云技术团队

一、业务背景 系统业务功能&#xff1a;系统内部进行数据处理及整合, 对外部系统提供结果数据的初始化(写)及查询数据结果服务。 系统网络架构: 部署架构对切量上线的影响 - 内部管理系统上线对其他系统的读业务无影响分布式缓存可进行单独扩容, 与存储及查询功能升级无关通过…...

OpenCV-22高斯滤波

一、高斯函数的基础 要理解高斯滤波首先要直到什么是高斯函数&#xff0c;高斯函数是符合高斯分布的&#xff08;也叫正态分布&#xff09;的数据的概率密度函数。 高斯函数的特点是以x轴某一点&#xff08;这一点称为均值&#xff09;为对称轴&#xff0c;越靠近中心数据发生…...

实现LCM在docker之间的通信

目录 1.docker容器互联 新建网络 连接容器 2.设置环境变量 3.在两个docker之间实现通信 1.docker容器互联 新建网络 $ docker network create -d bridge test-net 连接容器 运行一个容器并连接到新建的 test-net 网络: $ docker run -itd --name lcm_1 --network tes…...

GitLab任意用户密码重置漏洞(CVE-2023-7028)

GitLab CVE-2023-7028 POC user[email][]validemail.com&user[email][]attackeremail.com 本文链接&#xff1a; https://www.黑客.wang/wen/47.html...

在机械行业中,直线导轨和弧形导轨哪个应用范围更广泛?

弧形导轨和直线导轨是两种常见的导轨类型&#xff0c;直线导轨主要被用于高精度或快速直线往复运动场所&#xff0c;而弧形导轨是一种专门设计用于曲线运动的导轨系统&#xff0c;那么在机械行业中&#xff0c;直线导轨和弧形导轨哪个应用范围更加广泛呢&#xff1f; 直线导轨主…...

关于ue4 射击游戏架构设计

传统mmo的服务器架构 网关--->游戏逻辑服--->游戏db服 网关---> 游戏逻辑服--->关系服务器master 其结构简单&#xff0c;方便维护&#xff0c;但是在应对射击游戏时候暴露出很大的缺陷 但是随着大dau产品的像和平精英等游戏问世 腾讯主要的服务器是基于tbus4j…...

vc++开发地图

1、概述 &#xff08;1&#xff09;mapbox 官网&#xff1a;https://docs.mapbox.com/mapbox-gl-js/example/ github: https://github.com/mapbox/mapbox-gl-native (2)mapX 使用VC创建MapX控件步骤 在vc中作用mapx C 如何根据地理坐标范围获取瓦片地图并使用CImage库实现多张…...

轻量化的yolov8部署到安卓Android手机端

一、pytorch环境配置和yolov8源码安装 首先在电脑上需要配置好pytorch环境&#xff0c;和yolov8源码的下载 然后针对yolov8做自己的轻量化改进 二、下载Android Studio和ncnn-android-yolov8 1. Android Studio官网链接&#xff1a; 下载 Android Studio 和应用工具 - And…...

分块矩阵的定义、计算

目录 一、定义 二、分块矩阵的加减乘法 三、考点 一、定义 分块&#xff0c;顾名思义&#xff0c;将整个矩阵分成几部分&#xff0c;如下图所示 二、分块矩阵的加减乘法 三、考点 分块矩阵的考点不多&#xff0c;一般来说&#xff0c;有一种&#xff1a; 求分块矩阵的转置…...

NAND系统性能提升常见方案

随着NAND的发展&#xff0c;针对NAND系统性能提升&#xff0c;业内目前主要的做法有以下几种方案&#xff1a; 1.提升总线频率和优化AC时序&#xff1a; 提高NAND闪存接口的工作频率可以显著加快数据传输速度。通过不断改进工艺和技术&#xff0c;缩短了信号稳定时间、降低了延…...

集简云动作管理平台上线:创建强大且可分享的AI助手(GPTs)

OpenAI的GPT Store于昨天上线&#xff0c;用户可以找到好用的GPTs&#xff0c;也可以将自己的GPTs分享到GPT Store中。未来&#xff08;预计今年1季度&#xff09;甚至可以从GPTs Store中获取利润分成。 要创建强大的GPTs离不开调用外部的软件工具&#xff0c;比如查询CRM/ERP软…...

机器人制作开源方案 | 基于混合现实的可移动机械臂平台

作者&#xff1a;董泽宇 李肖兵 叶彤 李秉宸 吴雅霏 单位&#xff1a;广西大学 电气工程学院 指导老师&#xff1a;李勇 雷圆媛 为应对特殊条件下不便于实地进行移动式操作的问题&#xff0c;本作品设计了一套基于混合现实的可移动机械臂操作控制系统。该系统分为人机交互、机…...

JavaScript基础03

1 - 循环 1.1 for循环 语法结构 for(初始化变量; 条件表达式; 操作表达式 ){//循环体 } 名称作用初始化变量通常被用于初始化一个计数器&#xff0c;该表达式可以使用 var 关键字声明新的变量&#xff0c;这个变量帮我们来记录次数。条件表达式用于确定每一次循环是否能被执行…...

CMake入门教程【实战篇】使用开源库cmake-modules简化项目开发与维护

文章目录 简介项目地址项目特点使用方式模块使用模块说明示例结论简介 本教程介绍了rpavlik/cmake-modules,一个CMake模块集合,旨在简化和优化CMakeLists.txt文件的编写和维护工作。该集合尤其对虚拟现实和物理模拟包的开发者有用,同时也包含通用实用模块和针对旧版CMake的…...

基于TOP204的开关电源电路图

图为TOP204的典型应用电路。该电源的技术特点是输入电压为交流85&#xff5e;265V&#xff1b;输出电压为15V2&#xff05;&#xff1b;额定输出功率为30W&#xff1b;输出电压纹波不大于50mV&#xff1b;线性调整率为2&#xff05;&#xff1b;效率为85&#xff05;。电路中&a…...

CES 2024上的AI亮点

以下是CES 2024前两天AI方面亮点&#xff1a; 一个AI助手&#xff0c;取代你的智能手机应用程序的rabbit.tech人工智能驱动的捆绑式鞋子被称为“Moonwalkers”&#xff0c;可以让你走得更快 FitXR Slam的VR和健身创新WeHead的人工智能能给ChatGPT一张脸世界上第一个高清触觉游…...

Canopen学习笔记——sync同步报文增加数据域(同步计数器)

1.Canfestival同步报文sync的设置 在OD表中的配置如下&#xff1a; 如果0x1006索引的同步报文循环周期时间设置为0则禁用同步报文&#xff0c;这里要注意的就是&#xff0c;上面第一张图也提到了&#xff0c;时间单位是us。第二张图&#xff0c;我的0x1006就设置为0xF4240,也就…...

CRLF检测工具汇总

目录 漏洞介绍 详细请看 工具介绍 Oralyzer 介绍 主要功能...

vue、element-ui使用el-tooltip判断文本是否溢出

1.需求&#xff1a;需要实现文本单行显示&#xff0c;超出时&#xff0c;使用省略号&#xff0c;划过该文本时使用tooltip显示全部文本。需要考虑数据是由接口动态获取&#xff0c;只有溢出文本鼠标滑过时显示全部文本&#xff0c;没有溢出的则不需要。 2.实现&#xff1a; 第…...

织梦做企业网站/广东网站seo营销

弦生成器→d3.ribbon()。返回的函数使用二次贝塞尔曲线连接两个圆弧&#xff0c;以构成封闭的弦的路径数据。 从d3.ribbon()返回函数的作用来看&#xff0c;弦其实可分为两部分&#xff0c;一部分为两个圆弧&#xff0c;一部分为二次贝塞尔曲线。贝塞尔曲线是d3.ribbon()返回的…...

门户网站开发需求/seo自学网app

通过手机物理返回键实现弹出层的隐藏 <template><div class"popup"><h1 click"popup">返回键隐藏弹出层</h1><div class"pop" :class"{up: flag}">弹出层文本<--点击关闭实现弹出层隐藏--><sp…...

wordpress播放没声音/seo入门

三星家电业务对并购持开放态度 北京时间1月25日消息&#xff0c;三星电子高管今天在接受媒体采访时表示&#xff0c;为了保持家电业务的增长&#xff0c;公司会考虑各种选择&#xff0c;包括收购与合并。 本周一&#xff0c;三星召开媒体见面会。三星电子家电业务主管Suh Byung…...

wordpress博客简洁主题/网络营销手段有哪些方式

7-12 功夫传人 (25 分) 一门武功能否传承久远并被发扬光大&#xff0c;是要看缘分的。一般来说&#xff0c;师傅传授给徒弟的武功总要打个折扣&#xff0c;于是越往后传&#xff0c;弟子们的功夫就越弱…… 直到某一支的某一代突然出现一个天分特别高的弟子&#xff08;或者是…...

创建企业营销网站包括哪些内容/百度品牌

最近&#xff0c;一边喝着茶一边创造双11奇迹的阿里技术哥哥们火了。当大家感慨双11再次刷新历史的同时&#xff0c;也为阿里创新智能的能力而惊叹。 实际上在阿里巴巴内部&#xff0c;一些先进的智能技术已经运用到员工日常办公场景之中&#xff0c;让大家提高工作效率&#…...

简约创意logo设计免费生成/seo网站优化培训班

所以我想要样式锚元素包含其他html元素。该基地的代码是&#xff1a;HTML&#xff1a;CSS元素伪不覆盖子元素样式titleLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim自举类…...