当前位置: 首页 > 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; 求分块矩阵的转置…...

Z-Image-Turbo_Sugar脸部Lora入门指南:从零开始搭建Sugar专属AI人脸生成系统

Z-Image-Turbo_Sugar脸部Lora入门指南&#xff1a;从零开始搭建Sugar专属AI人脸生成系统 想快速生成专属Sugar风格的甜美脸部图片&#xff1f;本教程将手把手教你搭建一个基于Z-Image-Turbo_Sugar脸部Lora的AI人脸生成系统&#xff0c;无需复杂配置&#xff0c;轻松上手。 1. 环…...

AWS CloudFormation Templates多区域部署:构建高可用架构终极指南

AWS CloudFormation Templates多区域部署&#xff1a;构建高可用架构终极指南 【免费下载链接】aws-cloudformation-templates awslabs/aws-cloudformation-templates: 是一个包含各种 AWS CloudFormation 模板的存储库。适合查找和学习 AWS CloudFormation 模板的示例&#xf…...

提升效率神器:快马AI生成批量视频号下载与处理自动化脚本

提升效率神器&#xff1a;快马AI生成批量视频号下载与处理自动化脚本 手动下载和处理视频号内容确实是个耗时又枯燥的活儿。每次都要复制链接、打开下载工具、等待下载完成&#xff0c;再手动转换格式&#xff0c;一套流程下来&#xff0c;半天时间就没了。最近我发现用InsCod…...

3分钟快速上手:Greasy Fork用户脚本终极安装与管理指南

3分钟快速上手&#xff1a;Greasy Fork用户脚本终极安装与管理指南 【免费下载链接】greasyfork An online repository of user scripts. 项目地址: https://gitcode.com/gh_mirrors/gr/greasyfork 你是否曾经想过让浏览器变得更加强大&#xff1f;是否厌倦了重复的网页…...

昇腾算子开发知识地图

作者&#xff1a;昇腾实战派 背景 本博客旨在对社区发表的昇腾算子相关博客进行整理归类&#xff0c;方便用户导航使用&#xff1b;以下文章所用的机器均为昇腾相关设备。 Ascend C 基础理论 Ascend C基础 Ascend C算子开发详解&#xff1a;从原理到实战的深度剖析 深入A…...

终极桌面伴侣BongoCat:让键盘鼠标操作变得生动有趣的虚拟猫咪

终极桌面伴侣BongoCat&#xff1a;让键盘鼠标操作变得生动有趣的虚拟猫咪 【免费下载链接】BongoCat 让呆萌可爱的 Bongo Cat 陪伴你的键盘敲击与鼠标操作&#xff0c;每一次输入都充满趣味与活力&#xff01; 项目地址: https://gitcode.com/gh_mirrors/bong/BongoCat …...

dry快速入门:10个核心功能带你玩转Docker管理

dry快速入门&#xff1a;10个核心功能带你玩转Docker管理 【免费下载链接】dry moncho/dry: dry&#xff08;Docker Run Commands&#xff09;是一款命令行工具&#xff0c;旨在简化对Docker容器的操作管理&#xff0c;提供了一种简洁的方式创建、启动、停止和删除Docker容器。…...

使用VSCode调试TranslateGemma-27B模型调用

使用VSCode调试TranslateGemma-27B模型调用 1. 准备工作与环境配置 在开始调试TranslateGemma-27B模型之前&#xff0c;我们需要先搭建好开发环境。VSCode作为一款轻量级但功能强大的代码编辑器&#xff0c;提供了丰富的调试功能&#xff0c;特别适合深度学习项目的开发调试。…...

OpenClaw+GLM-4.7-Flash自动化写作:3小时生成30篇技术笔记实战

OpenClawGLM-4.7-Flash自动化写作&#xff1a;3小时生成30篇技术笔记实战 1. 为什么需要自动化知识管理 作为一个技术博主&#xff0c;我每天需要消化大量技术文档和论文。过去两年里&#xff0c;我尝试过各种笔记工具——从Notion到Obsidian&#xff0c;从语雀到飞书文档。但…...

造相-Z-Image-Turbo亚洲美女LoRA实战:小宇宙播客封面图情绪传达技巧

造相-Z-Image-Turbo亚洲美女LoRA实战&#xff1a;小宇宙播客封面图情绪传达技巧 1. 项目介绍与核心价值 今天要分享的是一个特别实用的AI工具——基于Z-Image-Turbo的亚洲美女LoRA图片生成服务。这个工具专门为内容创作者设计&#xff0c;特别是小宇宙播客的主播们&#xff0…...