项目练习:若依管理系统字典功能-Vue前端部分

文章目录

  • 一、情景说明
  • 二、若依Vue相关代码及配置
    • 1、utils代码
    • 2、components组件
    • 3、api接口代码
    • 4、Vuex配置
    • 5、main.js配置
  • 三、使用方法
    • 1、html部分
    • 2、js部分

一、情景说明

我们在做web系统的时候,肯定会遇到一些常量选择场景。
比如,性别:男女。
状态:正常,异常。
这些常量选择就可以做成字典配置功能。

二、若依Vue相关代码及配置

1、utils代码

在这里插入图片描述

2、components组件

在这里插入图片描述

3、api接口代码

在这里插入图片描述

4、Vuex配置

在这里插入图片描述

5、main.js配置

// 字典数据组件
import DictData from '@/components/DictData'
DictData.install()import store from './store'
new Vue({router,store,render: h => h(App)
}).$mount('#app')

三、使用方法

在任意一个vue文件中

1、html部分

          <el-form-item label="状态"><el-radio-group v-model="form.status" v-removeAriaHidden><el-radiov-for="dict in dict.type.sys_normal_disable":key="dict.value":label="dict.value":value="dict.value">{{dict.label}}</el-radio></el-radio-group></el-form-item>

2、js部分

在这里插入图片描述
至于,dicts里配置的值,从数据库查看即可。

个人理解,至于字典这块的前端代码,为什么写的如此复杂,
我是不太理解的。
太绕,没看懂。

但是,直接这么copy,是可以直接使用的。

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

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

相关文章

LabVIEW开发X光图像的边缘检测

在医疗影像处理中&#xff0c;X光图像的分析对于骨折、肿瘤等病变的检测非常重要。X光图像中包含许多关键信息&#xff0c;然而&#xff0c;由于图像噪声的干扰&#xff0c;直接从图像中提取有用的特征&#xff08;如骨折的边缘&#xff09;变得非常困难。边缘检测作为图像处理…

【CC2640R2F】香瓜CC2640R2F之SPI读写W25Q80

本文最后修改时间&#xff1a;2022年01月08日 10:45 一、本节简介 本节以simple_peripheral工程为例&#xff0c;介绍如何使用SPI读写W25Q80&#xff08;外部flash&#xff09;。 二、实验平台 1&#xff09;CC2640R2F平台 ①协议栈版本&#xff1a;CC2640R2 SDK v1.40.00.4…

光谱相机如何还原色彩

多光谱通道采集 光谱相机设有多个不同波段的光谱通道&#xff0c;可精确记录每个波长的光强信息。如 8 到 16 个甚至更多的光谱通道&#xff0c;每个通道负责特定波长范围的光信息记录。这使得相机能分辨出不同光谱组合产生的相同颜色感知&#xff0c;而传统相机的传感器通常只…

C# 获取PDF文档中的字体信息(字体名、大小、颜色、样式等

在设计和出版行业中&#xff0c;字体的选择和使用对最终作品的质量有着重要影响。然而&#xff0c;有时我们可能会遇到包含未知字体的PDF文件&#xff0c;这使得我们无法准确地复制或修改文档。获取PDF中的字体信息可以解决这个问题&#xff0c;让我们能够更好地处理这些文件。…

Shell正则表达式与文本处理三剑客(grep、sed、awk)

一、正则表达式 Shell正则表达式分为两种&#xff1a; 基础正则表达式&#xff1a;BRE&#xff08;basic regular express&#xff09; 扩展正则表达式&#xff1a;ERE&#xff08;extend regular express&#xff09;&#xff0c;扩展的表达式有、?、|和() 1.1 基本正则表…

arcgis提取不规则栅格数据的矢量边界

效果 1、准备数据 栅格数据:dem或者dsm 2、栅格重分类 分成两类即可 3、新建线面图层 在目录下选择预先准备好的文件夹,点击右键,选择“新建”→“Shapefile”,新建一个Shapefile文件。 在弹出的“新建Shapefile”对话框内“名称”命名为“折线”,“要素类型”选…

阿里云通义实验室自然语言处理方向负责人黄非:通义灵码2.0,迈入 Agentic AI

通义灵码是基于阿里巴巴通义大模型研发的AI 智能编码助手&#xff0c;在通义灵码 1.0 时代&#xff0c;我们针对代码的生成、补全和问答&#xff0c;通过高效果、低时延&#xff0c;研发出了国内最受欢迎的编码助手。 在通义灵码 2.0 发布会上&#xff0c;阿里云通义实验室自然…

Open3D 最小二乘拟合平面(直接求解法)【2025最新版】

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT。 博客长期更新,本文最近更新时间为:2025年1月18日。 一、算法原理 平面方程的一般表达式为:

超标量处理器设计2-cache

1. cache 介绍 影响Cache缺失的情况有3种&#xff1a; Compulsory: 第一次被访问的指令或者数据肯定不会在cache中&#xff0c;需要通过预取来减少这种缺失Capcity: Cache容量越大&#xff0c;缺失就可以更少, 程序频繁使用的三个数据来源于3个set&#xff0c; 但是&#xff…

当PHP遇上区块链:一场奇妙的技术之旅

PHP 与区块链的邂逅 在技术的广袤宇宙中&#xff0c;区块链技术如同一颗耀眼的新星&#xff0c;以其去中心化、不可篡改、透明等特性&#xff0c;掀起了一场席卷全球的变革浪潮。众多开发者怀揣着对新技术的热忱与探索精神&#xff0c;纷纷投身于区块链开发的领域&#xff0c;试…

vscode的安装与使用

下载 地址&#xff1a;https://code.visualstudio.com/ 安装 修改安装路径&#xff08;不要有中文&#xff09; 点击下一步&#xff0c;创建桌面快捷方式&#xff0c;等待安装 安装中文插件 可以根据自己的需要安装python和Jupyter插件

浅谈云计算19 | OpenStack管理模块 (上)

OpenStack管理模块&#xff08;上&#xff09; 一、操作界面管理架构二、认证管理2.1 定义与作用2.2 认证原理与流程2.2.1 认证机制原理2.2.2 用户认证流程 三、镜像管理3.1 定义与功能3.2 镜像服务架构3.3 工作原理与流程3.3.1 镜像存储原理3.3.2 镜像检索流程 四、计算管理4.…

彩色图像面积计算一般方法及MATLAB实现

一、引言 在数字图像处理中&#xff0c;经常需要获取感兴趣区域的面积属性&#xff0c;下面给出图像处理的一般步骤。 1.读入的彩色图像 2.将彩色图像转化为灰度图像 3.灰度图像转化为二值图像 4.区域标记 5.对每个区域的面积进行计算和显示 二、程序代码 %面积计算 cle…

分布式理解

分布式 如何理解分布式 狭义的分布是指&#xff0c;指多台PC在地理位置上分布在不同的地方。 分布式系统 分布式系**统&#xff1a;**多个能独立运行的计算机&#xff08;称为结点&#xff09;组成。各个结点利用计算机网络进行信息传递&#xff0c;从而实现共同的“目标或者任…

Red Hat8:搭建FTP服务器

目录 一、匿名FTP访问 1、新建挂载文件 2、挂载 3、关闭防火墙 4、搭建yum源 5、安装VSFTPD 6、 打开配置文件 7、设置配置文件如下几个参数 8、重启vsftpd服务 9、进入图形化界面配置网络 10、查看IP地址 11、安装ftp服务 12、遇到拒绝连接 13、测试 二、本地…

Re78 读论文:GPT-4 Technical Report

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文全名&#xff1a;GPT-4 Technical Report 官方博客&#xff1a;GPT-4 | OpenAI appendix懒得看了。 文章目录 1. 模型训练过程心得2. scaling law3. 实验结果减少风险 1. 模型训练过程心得 模型结构还…

推荐单通道有刷直流电机驱动芯片AT8236

单通道直流有刷电机驱动芯片AT8236 描述应用特点型号选择典型应用原理图管脚列表推荐工作条件 atT A 25C电气特性 atT A 25C,V M 24VH桥控制电流控制死区时间休眠模式过流保护 (OCP)过温保护 (TSD)欠压锁定保护(UVLO) PCB 版图建议典型应用示例 描述 AT8236是一款直流有刷电机…

聚铭网络6款产品入选CCIA《网络安全专用产品指南》

近日&#xff0c;中国网络安全产业联盟CCIA正式发布《网络安全专用产品指南》&#xff08;第二版&#xff09;&#xff08;以下简称《指南》&#xff09;。聚铭网络凭借突出技术优势、创新能力以及市场积累&#xff0c;旗下安全产品成功入选防火墙、网络安全审计、日志分析、网…

将 AzureBlob 的日志通过 Azure Event Hubs 发给 Elasticsearch(1)

问题 项目里使用了 AzureBlob 存储了用户上传的各种资源文件&#xff0c;近期 AzureBlob 的流量费用增长很快&#xff0c;想通过分析Blob的日志&#xff0c;获取一些可用的信息&#xff0c;所以有了这个需求&#xff1a;将存储账户的日志&#xff08;读写&#xff0c;审计&…

ESP32S3基于espidf接入网络获取NTP时间

ESP32S3基于espidf接入网络获取NTP时间 &#x1f4cc; 相关篇《ESP32S3基于espidf接入网络配置介绍》&#x1f4cd;官方相关SNTP 时间同步介绍文档&#xff1a;https://docs.espressif.com/projects/esp-idf/zh_CN/stable/esp32/api-reference/system/system_time.html?highli…