项目练习:若依管理系统字典功能-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;让我们能够更好地处理这些文件。…

C++ 的 CTAD 与推断指示(Deduction Guides)

1 类模板参数推导&#xff08;CTAD&#xff09; 1.1 曲线救国 ​ CTAD 的全称是类模板参数推导&#xff08;Class Template Argument Deduction&#xff09;&#xff0c;它允许在实例化类模板时&#xff0c;根据构造函数的参数类型自动推导模板参数&#xff0c;从而避免显式指…

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

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

掌握 React 高阶组件与高阶函数:构建可复用组件的新境界

一、引言 在 React 开发中&#xff0c;代码复用性和逻辑分离是提高开发效率和维护性的重要手段。高阶组件&#xff08;Higher-Order Component, HOC&#xff09;和高阶函数&#xff08;Higher-Order Function, HOF&#xff09;是实现这一目标的两种强大工具。本文将详细介绍这…

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…

linux 安装PrometheusAlert配置钉钉告警

在 Linux 上安装 PrometheusAlert 并配置钉钉告警的步骤如下: 1. 准备工作 钉钉机器人: 在钉钉群中创建一个机器人,获取 Webhook URL。示例 Webhook URL:https://oapi.dingtalk.com/robot/send?access_token=your_dingtalk_token。PrometheusAlert 安装包: 从 Prometheus…

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

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

vscode的安装与使用

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

32单片机综合应用案例——物联网(IoT)环境监测站(四)(内附详细代码讲解!!!)

无论你身处何种困境&#xff0c;都要坚持下去&#xff0c;因为勇气和毅力是成功的基石。不要害怕失败&#xff0c;因为失败并不代表终结&#xff0c;而是为了成长和进步。相信自己的能力&#xff0c;相信自己的潜力&#xff0c;相信自己可以克服一切困难。成功需要付出努力和坚…

浅谈云计算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.…

RK3568 Android11 锁屏界面屏蔽下拉状态栏

参考文章&#xff1a; Android R锁屏界面屏蔽下拉状态栏_pulseexpansionhandler-CSDN博客 前提增加状态栏控制显隐属性&#xff0c;以下面文章为前提补充功能 RK3568 Android11 状态栏和导航栏增加显示控制功能-CSDN博客 修改文件位置&#xff1a; frameworks/base/package…

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

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

分布式理解

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

深入了解卷积神经网络(CNN):图像处理与深度学习的革命性技术

深入了解卷积神经网络&#xff08;CNN&#xff09;&#xff1a;图像处理与深度学习的革命性技术 导语 卷积神经网络&#xff08;CNN&#xff09;是现代深度学习领域中最重要的模型之一&#xff0c;特别在计算机视觉&#xff08;CV&#xff09;领域具有革命性的影响。无论是图…