通过返回的key值匹配字典中的value值
需求
页面中上面搜索项有获取字典枚举接口,table表格中也有根据key匹配字典中的value
方案一
需要做到的要求
- 这里上面下拉列表是一个组件获取的字典,下面也是通过字典匹配,所以尽量统一封装一个函数,每个组件保证最少变动
- table表格中如果filters中更改,会获取多次接口,—使用闭包让只获取一次接口,节省性能
- filter中又是必须同步函数,异步函数报错,所以不能使用async,await
- 最好请求接口之后存储起来下次直接拿不用请求了
综上
utils/dictionary.js
import { getDicValue } from '@/api/systemManage'
import store from '@/store'
/*** 获取字典数据* @param {Boolean} hasAllOption 是否包含全部选项*/
export function getDicValueList(dictClassCode, hasAllOption = true) {const dictionaryCache = store.state.dictionary.dictionaryCache || {}return new Promise((resolve, reject) => {let optionList = []if (dictionaryCache[dictClassCode]) {const dicList = JSON.parse(JSON.stringify(dictionaryCache[dictClassCode]))if (hasAllOption) {optionList = [ { value: '', label: '全部' }, ...dicList]} else {optionList = [...dicList]}resolve(optionList)} else {getDicValue(dictClassCode).then(response => {console.log('字典调用', dictClassCode)const dicList = response.value || []store.dispatch('dictionary/setDictionaryCache', { key: dictClassCode, value: dicList })if (hasAllOption) {optionList = [ { value: '', label: '全部' }, ...dicList]} else {optionList = [...dicList]}resolve(optionList)}).catch(error => {reject([])})}})
}/*** 获取字典数据并返回一个闭包函数* @param {string} dictClassCode 字典类代码* @param {string} noTitle 默认值,当找不到匹配项时返回* @returns {Promise<Function>} 返回一个闭包函数,该函数可以根据 value 获取 label*/
export async function getDicValueName(dictClassCode, noTitle = "--") {try {const response = await getDicValueList(dictClassCode, false)const listData = response || []return (value) => {let label = noTitlelistData.some(item => {if (item.value === value) {label = item.labelreturn true}})return label}} catch (err) {console.error(err)return (value) => noTitle}
}
下拉框组件
created () {this.getOptionLists()},getOptionLists() {if (this.dictClassCode) {getDicValueList(this.dictClassCode).then(res => {this.optionLists = res})} else {this.optionLists = this.options}},
table组件中
<span>{{ filterStateName(scope.row.state) }}</span>import { getDicValueName } from '@/utils/dictionary'created() {this.initDictionary()},methods: {
async initDictionary() {try {this.filterStateName = await getDicValueName('DC_DICTIONARY_STATE')} catch (error) {console.error('Failed to fetch dictionary:', error)this.filterStateName = (value) => '--'}},}
问题: 但是这种因为一进页面这两个组件都是去获取字典,所以还是从接口拿的数据,会调用两次接口
方案二(建议)
方案:接下来优化可以通过路由导航预加载,先获取字典之后,在加载页面
router.js
// 预加载字典
export function preloadDictionary(dictClassCodeList) {const pList = []dictClassCodeList.forEach(dictClassCode => {const p = getDicValueList(dictClassCode)pList.push(p)})return Promise.all(pList)
}// 预加载字典
router.beforeEach((to, from, next) => {if(to.meta && to.meta.dictClassCodeList&& to.meta.dictClassCodeList.length > 0) {preloadDictionary(to.meta.dictClassCodeList).then(res => {next()})} else {next()}
})
总结:其实这里都可以规定直接预加载字典,到页面直接使用加载后的字典,注册个全局filters就行,根本不用上面那些,先都记录上,后期根据需求灵活应用吧
相关文章:
通过返回的key值匹配字典中的value值
需求 页面中上面搜索项有获取字典枚举接口,table表格中也有根据key匹配字典中的value 方案一 需要做到的要求 这里上面下拉列表是一个组件获取的字典,下面也是通过字典匹配,所以尽量统一封装一个函数,每个组件保证最少变动tabl…...
30 分钟从零开始入门 CSS
HTML CSS JS 30分钟从零开始入门拿下 HTML_html教程-CSDN博客 30 分钟从零开始入门 CSS-CSDN博客 JavaScript 指南:从入门到实战开发-CSDN博客 前言 最近也是在复习,把之前没写的博客补起来,之前给大家介绍了 html,现在是 CSS 咯…...
矩阵的奇异值(SVD)分解和线性变换
矩阵的奇异值(SVD)分解和线性变换 SVD定义 奇异值分解(Singular Value Decomposition,简称 SVD)是一种重要的线性代数工具,能够将任意矩阵 ( A ∈ R m n \mathbf{A} \in \mathbb{R}^{m \times n} A∈Rmn…...
Kubernetes与Docker:区别与优劣总结
在云原生技术栈中,Docker和Kubernetes是两大核心工具,但它们的功能定位和使用场景截然不同。本文将从技术原理、架构设计、功能特性及适用场景等角度,深入分析两者的区别与优劣,并结合实际应用场景说明如何协同使用。 一、核心技术…...
表单验证和正则表达式
表单验证 表单:收集用户信息,并把信息发送给服务器程序进行处理 what 验证数据的格式,将符合标准数据格式要求的数据,发送给后台。 对用户的输入做格式校验,确保能够发送到后台服务器的数据一定是正确的。降低服务器…...
汽车免拆诊断案例 | 保时捷车发动机偶发熄火故障 2 例
案例1 2008款保时捷卡宴车行驶中发动机偶发熄火 故障现象 一辆2008款保时捷卡宴车,搭载4.8 L 自然吸气发动机,累计行驶里程约为21万km。车主反映,该车行驶中发动机偶发熄火;重新起动,发动机能够起动着机ÿ…...
mongodb【实用教程】
MongoDB 是一个开源的文档型数据库管理系统 下载安装 Windows 系统 https://blog.csdn.net/weixin_41192489/article/details/126777309 GUI工具 【推荐】MongoDB Compass https://www.mongodb.com/zh-cn/docs/compass/current/ Robo 3T https://blog.csdn.net/weixin_4119248…...
Javaweb后端数据库多表关系一对多,外键,一对一
多表关系 一对多 多的表里,要有一表里的主键 外键 多的表上,添加外键 一对一 多对多 案例...
React(10)
项目实践--创建项目 在store的modules中创建相关的子仓库暴露到仓库index文件中 导入creatSlice和axios 创建仓库 和数据的异步修改方法 // 编写store // 导入createSlice和axios import { createSlice } from "reduxjs/toolkit"; import axios from "axios&…...
JAVA实战开源项目:靓车汽车销售网站(Vue+SpringBoot) 附源码
本文项目编号 T 093 ,文末自助获取源码 \color{red}{T093,文末自助获取源码} T093,文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...
【大语言模型】【整合版】DeepSeek 模型提示词学习笔记(散装的可以看我之前的学习笔记,这里只是归纳与总结了一下思路,内容和之前发的差不多)
以下是个人笔记的正文内容: 原文在FlowUs知识库上,如下截图。里面内容和这里一样,知识排版好看一点 一、什么是 DeepSeek 1. DeepSeek 简介 DeepSeek 是一家专注于通用人工智能(AGI)的中国科技公司,主攻大模型研发与…...
网络安全扫描--基础篇
前言 1、了解互联网安全领域中日趋重要的扫描技术 2、了解在不同网络场景下扫描技术手段 3、熟悉linux下系统内核防护策略并能大件一个有效的系统防护体系 4、增强工作安全意识,并能有效的实践于工作场景中 目录 1、熟悉主机扫描工具(fping,…...
Python网络安全脚本
🍅 点击文末小卡片 ,免费获取网络安全全套资料,资料在手,涨薪更快 前言 睡不着,那就起来学习其实base64模块很早之前用过今天做爬虫的时候有个URL需要用它来编码一下 所以百度又学了一下遇到最大的问题就是python3和p…...
ElasticSearch查询指南:从青铜到王者的骚操作
ElasticSearch查询指南:从青铜到王者的骚操作 本文来源于笔者的CSDN原创,由于掘金>已经去掉了转载功能,所以只好重新上传,以下图片依然保持最初发布的水印(如CSDN水印)。(以后属于本人原创均…...
四、详细解释:网络与连接操作命令
1. ping – 测试网络连通性 用途:检查与目标主机之间的网络连接是否通畅。 语法: ping [选项] 目标IP或域名常用选项: -c 次数:指定发送数据包的次数(默认无限次,需手动 CtrlC 终止)。-i 秒数&…...
前端关于Cursor编辑器的了解与深度使用及对工作的便利
1. 什么是 Cursor 编辑器? Cursor 是一款基于 AI 的现代代码编辑器,类似于 VS Code,但内置了强大的 AI 功能。它的核心目标是帮助开发者更快、更智能地编写代码。 主要特点: AI 驱动的代码补全:提供上下文相关的智能代码建议。代码生成与修复:通过自然语言描述生成代码…...
Java Junit框架
JUnit 是一个广泛使用的 Java 单元测试框架,用于编写和运行可重复的测试。它是 xUnit 家族的一部分,专门为 Java 语言设计。JUnit 的主要目标是帮助开发者编写可维护的测试代码,确保代码的正确性和稳定性。 JUnit 的主要特点 注解驱动&…...
高级自动化测试常见面试题(Web、App、接口)
一、Web自动化测试 1.Selenium中hidden或者是display = none的元素是否可以定位到? 不能,可以写JavaScript将标签中的hidden先改为0,再定位元素 2.Selenium中如何保证操作元素的成功率?也就是说如何保证我点击的元素一定是可以…...
京准电钟解读:为何不能用网络上的NTP时间源服务器
京准电钟解读:为何不能用网络上的NTP时间源服务器 京准电钟解读:为何不能用网络上的NTP时间源服务器 通常是因为以下几个方面的原因: 安全性问题: NTP服务器可能被黑客操纵或成为攻击的目标,如果服务器被攻破&…...
Android OpenGLES2.0开发(十一):渲染YUV
人生如逆旅,我亦是行人 Android OpenGLES开发:EGL环境搭建Android OpenGLES2.0开发(一):艰难的开始Android OpenGLES2.0开发(二):环境搭建Android OpenGLES2.0开发(三&am…...
7种内外网数据交换方案全解析 哪种安全、高效、合规?
内外网数据交换方案主要解决了企业跨网络数据传输中的安全、效率与合规性问题。通过采用先进的加密技术、高效的数据传输协议以及严格的审批和审计机制,该方案确保了数据在内外网之间的安全交换,同时提高了传输效率,并满足了企业对数据合规性…...
详解:事务注解 @Transactional
创作内容丰富的干货文章很费心力,感谢点过此文章的读者,点一个关注鼓励一下作者,激励他分享更多的精彩好文,谢谢大家! Transactional 是 Spring Framework 中常用的注解之一,它可以被用于管理事务。通过使…...
2025最新Flask学习笔记(对照Django做解析)
前言:如果还没学Django的同学,可以看Django 教程 | 菜鸟教程,也可以忽略下文所提及的Django内容;另外,由于我们接手的项目大多都是前后端分离的项目,所以本文会跳过对模板的介绍,感兴趣的朋友可…...
大模型面试问题准备
1. BERT的多头注意力为什么需要多头? 为了捕捉不同子空间的语义信息,每个头关注不同的方面,增强模型的表达能力 2. 什么是softmax上下溢出问题? 问题描述: 上溢出:ye^x中,如果x取非常大的正数…...
FFmpeg 命令行全解析:高效音视频处理从入门到精通
FFmpeg FFmpeg 是一款开源的多媒体处理工具集,支持音视频编解码、格式转换、流媒体处理等全链路操作。核心功能与工具: 多媒体全链路支持 支持 1000+ 音视频编解码格式(如 H.264、HEVC、AV1)和协议(RTMP、RTSP、HLS),覆盖录制、转码、流化等全流程。提供三大核心工具: …...
在使用LomBok时编译器弹出java: 错误: 不支持发行版本 5该怎么解决的四种方案
你遇到的错误 java: 错误: 不支持发行版本 5 表明你的代码正在尝试使用 Java 5 或更早版本的编译器,而这些版本已经不再受支持,并且可能与你当前使用的 JDK 版本不兼容。以下是解决此问题的步骤: 1. 检查项目语言级别 确保你的项目配置为使…...
【数据结构】(12) 反射、枚举、lambda 表达式
一、反射 1、反射机制定义及作用 反射是允许程序在运行时检查和操作类、方法、属性等的机制,能够动态地获取信息、调用方法等。换句话说,在编写程序时,不需要知道要操作的类的具体信息,而是在程序运行时获取和使用。 2、反射机制…...
在VSCode中安装jupyter跑.ipynb格式文件
个人用vs用的较多,不习惯在浏览器单独打开jupyter,看着不舒服,直接上教程。 1、在你的环境中pip install ipykernel 2、在vscode的插件中安装jupyter扩展 3、安装扩展后,打开一个ipynb文件,并且在页面右上角配置内核 …...
WordPress网站502错误全面排查与解决指南
502 Bad Gateway错误是WordPress站长最常遇到的服务器问题之一,它意味着服务器作为网关或代理时,未能从上游服务器获取有效响应。针对WP可能出现的502问题,本文提供一些基础到进阶的解决方案供大家参考:) 一、502错误的本质和核心诱因 502错误属于HTTP状态码中的5xx系列,…...
锂电池保护板测试仪:电池安全的守护者与创新驱动力
在新能源产业蓬勃发展的今天,锂电池以其高能量密度、长循环寿命和环保特性,成为电动汽车、无人机、便携式电子设备等领域不可或缺的能量来源。然而,锂电池的安全性和稳定性一直是行业关注的焦点。为了确保锂电池在各种应用场景下的可靠运行&a…...
flowable-ui 的会签功能实现
场景:在进行智慧保时通开发时,有个协作合同入围功能,这个功能的流程图里有个评审小组,这个评审小组就需要进行会签操作,会签完成后,需要依据是否有不通过的情况选择下一步走的流程 思考步骤: 首…...
Python学习第十七天之PyTorch保姆级安装
PyTorch安装与部署 一、准备工作二、pytorch介绍三、CPU版本pytorch安装1. 创建虚拟环境2. 删除虚拟环境1. 通过环境名称删除2. 通过环境路径删除 3. 配置镜像源4. 安装pytorch1. 首先激活环境变量2. 进入pytorch官网,找到安装指令 5. 验证pytorch是否安装成功 四、…...
Kibana:Spotify Wrapped 第二部分:深入挖掘数据
作者:来自 Elastic Philipp Kahr 我们将比以往更深入地探究你的 Spotify 数据并探索你甚至不知道存在的联系。 在由 Iulia Feroli 撰写的本系列的第一部分中,我们讨论了如何获取 Spotify Wrapped 数据并在 Kibana 中对其进行可视化。在第 2 部分中&#…...
半导体晶圆精控:ethercat转profient网关数据提升制造精度
数据采集系统通过网关连接离子注入机,精细控制半导体晶圆制造过程中的关键参数。 在半导体制造中,晶圆制造设备的精密控制是决定产品性能的关键因素。某半导体工厂采用耐达讯Profinet转EtherCAT协议网关NY-PN-ECATM,将其数据采集系统与离子注…...
CMake小结2(PICO为例)
1 前言 之前写过一篇cmake,不过很简单:CMake小结_cmake ${sources}-CSDN博客 构建系统现在真的太多了,完全学不过来的感觉,meson,gardle,buildroot, Maven。。。我是真的有点放弃治疗了。之前…...
5. Go 方法(结构体的方法成员)
Go语言没有传统的 class ,为了让函数和结构体能够关联,Go引入了“方法”的概念。 当普通函数添加了接收者(receiver)后,就变成了方法。 一、函数和方法示例 // 普通函数 func Check(s string) string {return s }//…...
Linux查看和处理文件内容
1.文本文件 有字符集编码的文件 如:ASCII、UTF-8、Unicode、ANSI等 常见的文本文件 txt、xml、conf、properties、yml等配置文件、日志文 件、源代码 2.二进制文件 除文本文件外的文件 如:可执行程序、图片、音频、视频 3.cat 格式:…...
关于网络端口探测:TCP端口和UDP端口探测区别
网络端口探测是网络安全领域中的一项基础技术,它用于识别目标主机上开放的端口以及运行在这些端口上的服务。这项技术对于网络管理和安全评估至关重要。在网络端口探测中,最常用的两种协议是TCP(传输控制协议)和UDP(用…...
Spring IoC和DI
Spring IoC和DI 1 IOC1.1 什么是IoC?1.2 IoC 介绍1.2.1 传统程序开发1.2.2 问题分析1.2.3 IoC程序开发1.2.3 IoC 优势 1.3 DI 介绍 2. IoC & DI 使⽤IoC 详解Bean的存储1.1 Controller(控制器存储) 1.2 Service(服务存储&…...
centos9之ESXi环境下安装
一、centos9简介 CentOS Stream 9是一个基于RHEL(Red Hat Enterprise Linux)的开源操作系统。它是CentOS Stream系列的最新版本。CentOS Stream是一个中间发行版,位于RHEL和Fedora之间,旨在提供更及时的软件更新和新功能。CentOS …...
【论文学习】基于规模化Transformer模型的低比特率高质量语音编码
以下文章基于所提供的文档内容撰写,旨在对该论文“Scaling Transformers for Low-Bitrate High-Quality Speech Coding”进行较为系统和深入的分析与总结。 论文地址:https://arxiv.org/pdf/2411.19842 一、研究背景与动机 自20世纪70年代以来ÿ…...
Docker 2025/2/24
用来快速构建、运行和管理应用的工具。帮助部署。 快速入门 代码略 解释 docker run :创建并运行一个容器,-d是让容器在后台运行 --name mysql :给容器起个名字,必须唯一 -p 3306:3306 :设置端口映射 -e KEYVALUE :是设置环境变量 mysql :指定运行的…...
Rust语言基础知识详解【一】
1.在windows上安装Rust Windows 上安装 Rust 需要有 C 环境,以下为安装的两种方式: 1. x86_64-pc-windows-msvc(官方推荐) 先安装 Microsoft C Build Tools,勾选安装 C 环境即可。安装时可自行修改缓存路径与安装路…...
Kronecker分解(K-FAC):让自然梯度在深度学习中飞起来
Kronecker分解(K-FAC):让自然梯度在深度学习中飞起来 在深度学习的优化中,自然梯度下降(Natural Gradient Descent)是一个强大的工具,它利用Fisher信息矩阵(FIM)调整梯度…...
Ubutu部署WordPress
前言 什么是word press WordPress是一种使用PHP语言开发的建站系统,用户可以在支持PHP和MySQL数据库的服务器上架设WordPress。它是一个开源的内容管理系统(CMS),允许用户构建动态网站和博客。现在的WordPress已经强大到几乎可以…...
请解释 React 中的 Hooks,何时使用 Hooks 更合适?
一、Hooks 核心理解 1. 什么是 Hooks? Hooks 是 React 16.8 引入的函数式编程范式,允许在函数组件中使用状态管理和生命周期能力。就像给函数组件装上了"智能芯片",让原本只能做简单展示的组件具备了处理复杂逻辑的能力。 2. 类…...
在Linux桌面上创建Idea启动快捷方式
1、在桌面新建idea.desktop vim idea.desktop [Desktop Entry] EncodingUTF-8 NameIntelliJ IDEA CommentIntelliJ IDEA Exec/home/software/idea-2021/bin/idea.sh Icon/home/software/idea-2021/bin/idea.svg Terminalfalse TypeApplication CategoriesApplication;Developm…...
如何在netlify一键部署静态网站
1. 准备你的项目 确保你的静态网站文件(如 HTML、CSS、JavaScript、图片等)都在一个文件夹中。通常,项目结构如下: my-static-site/ ├── index.html ├── styles/ │ └── styles.css └── scripts/└── script.js…...
网页制作09-html,css,javascript初认识のhtml如何使用表单
表单主要用来收集客户端提供的相关信息。,使网页具有交互作用。在网页制作的过程中,常常需要使用表单,如进行会员注册,网上调查和搜索等 访问者可以使用如文本域列表框,复选框以及单选按钮之类的表单对象输入信息,然后…...
Linux 命令大全完整版(03)
1. 系统管理命令 screen 功能说明:多重视窗管理程序。语 法:screen [-AmRvx -ls -wipe][-d <作业名称>][-h <行数>][-r <作业名称>][-s <shell>][-S <作业名称>]补充说明:screen 为多重视窗管理程序。此处…...