项目练习:若依管理系统字典功能-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,是可以直接使用的。
相关文章:
项目练习:若依管理系统字典功能-Vue前端部分
文章目录 一、情景说明二、若依Vue相关代码及配置1、utils代码2、components组件3、api接口代码4、Vuex配置5、main.js配置 三、使用方法1、html部分2、js部分 一、情景说明 我们在做web系统的时候,肯定会遇到一些常量选择场景。 比如,性别:…...
apache-skywalking-apm-10.1.0使用
apache-skywalking-apm-10.1.0使用 本文主要介绍如何使用apache-skywalking-apm-10.1.0,同时配合elasticsearch-8.17.0-windows-x86_64来作为存储 es持久化数据使用。 步骤如下: 一、下载elasticsearch-8.17.0-windows-x86_64 1、下载ES(elasticsear…...
计算机视觉算法实战——视频分析(Video Analysis)
✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ 视频分析是计算机视觉中的一个重要领域,旨在从视频数据中提取有用的信息&…...
全网首发:编译libssh,产生类似undefined reference to `EVP_aes_256_ctr@OPENSSL_1_1_0‘的大量错误
具体错误 前面和后面的: /opt/linux/x86-arm/aarch64-mix210-linux/host_bin/../lib/gcc/aarch64-linux-gnu/7.3.0/../../../../aarch64-linux-gnu/bin/ld: warning: libcrypto.so.1.1, needed by ../lib/libssh.so.4.10.1, not found (try using -rpath or -rpat…...
用python实战excel和word自动化
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 python实现excel和word自动化--批量处理 前言--需求快要期末了需要,提交一个年级的学生成绩数据,也就是几百份。当前我们收集了一份excel表格…...
【云计算】OpenStack云计算平台
OpenStack云计算平台框架搭建 1.先换源 先换成阿里源: curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 2.安装框架 yum -y install centos-release-openstack-train 3.安装客户端 yum -y install python-openstackclient 但…...
好用的php商城源码有哪些?
选择一个优秀的商城工具,能更好地帮助大家建立一个好用的商城系统。目前比较流行的都是开源PHP商城系统,那么现实中都有哪些好用的PHP商城源码值得推荐呢?下面就带大家一起来了解一下。 1.TigShop 【推荐指数】:★★★★★☆ 【推…...
docker安装Nginx UI
开源地址:nginx-ui/README-zh_CN.md at dev 0xJacky/nginx-ui GitHub docker run -dit \ --namenginx-ui \ --restartalways \ -e TZAsia/Shanghai \ -v /Users/xiaoping/docker/appdata/nginx:/etc/nginx \ -v /Users/xiaoping/docker/appdata/nginx-ui:/etc/ng…...
为深度学习创建PyTorch张量 - 最佳选项
为深度学习创建PyTorch张量 - 最佳选项 正如我们所看到的,PyTorch张量是torch.Tensor PyTorch类的实例。张量的抽象概念与PyTorch张量之间的区别在于,PyTorch张量为我们提供了一个可以在代码中操作的具体实现。 在上一篇文章中,我们看到了…...
详解数据增强中的平移shft操作
Shift 平移是指在数据增强(data augmentation)过程中,通过对输入图像或目标进行位置偏移(平移),让目标在图像中呈现出不同的位置。Shift 平移的目的是增加训练数据的多样性,从而提高模型对目标在…...
CCLINKIE转ModbusTCP网关,助机器人“掀起”工业智能的“惊涛骇浪”
以下是一个稳联技术CCLINKIE转ModbusTCP网关(WL-CCL-MTCP)连接三菱PLC与机器人的配置案例:设备与软件准备设备:稳联技术WL-CCL-MTCP网关、三菱FX5UPLC、支持ModbusTCP协议的机器人、网线等。 稳联技术ModbusTCP转CCLINKIE网关&…...
类型安全与代码复用的C# 泛型
一、引言:泛型 ——C# 编程的神奇钥匙 在 C# 编程的广袤天地里,泛型宛如一把神奇钥匙,能够开启高效、灵活且安全的代码之门🚪。 想象一下,你是一位经验丰富的建筑师,要建造各种各样的房子🏠。…...
卷积神经05-GAN对抗神经网络
卷积神经05-GAN对抗神经网络 使用Python3.9CUDA11.8Pytorch实现一个CNN优化版的对抗神经网络 简单的GAN图片生成 CNN优化后的图片生成 优化模型代码对比 0-核心逻辑脉络 1)Anacanda使用CUDAPytorch2)使用本地MNIST进行手写图片训练3)…...
vscode使用Marscode编程助手
下载 vscode 在插件里下载Marscode编程助手 插件完成 在这里点击安装,点击后这里出现AI编程插件。...
网络分析仪测试S参数
S参数的测试 一:S参数的定义 S参数(Scattering Parameters,散射参数)是一个表征器件在射频信号激励下的电气行为的工具,它以输入信号、输出信号为元素的矩阵来表现DUT的“传输”和“散射”效应,输入、输出…...
docker mysql5.7如何设置不区分大小写
环境 docker部署,镜像是5.7,操作系统是centos 操作方式 mysql 配置文件是放在 /etc/mysql/mysql.conf.d/mysqld.cnf, vim /etc/mysql/mysql.conf.d/mysqld.cnf lower_case_table_names1 重启mysql容器 验证 SHOW VARIABLES LIKE low…...
【1】Word:邀请函
目录 题目 文字解析 流程 题目 文字解析 考生文件夹☞Word.docx☞一定要用ms打开,wps打开作答无效☞作答完毕,F12或者手动另存为(考生文件夹:路径文件名) 注意:一定要检查,很有可能你前面步…...
【gin】中间件使用之jwt身份认证和Cors跨域,go案例
Gin-3 中间件编程及 JWT 身份认证 1. Gin 中间件概述 中间件是处理 HTTP 请求的函数,可以在请求到达路由处理函数之前或之后对请求进行处理。 在 Gin 框架中,中间件常用于处理日志记录、身份验证、权限控制等功能。 router : gin.Default() router.Us…...
【JAVA实战】@FeignClient注解类通用请求封装
背景 最近在编写多个系统数据集成过程中,经常会使用到FeignClient注解标记一个类,类里面编写很多请求方法,如果第三方系统有非常多的URL请求,每个方法对应一个URL请求,那么这个类就会非常的庞大,是否有一种…...
[c语言日寄]精英怪:三子棋(tic-tac-toe)3命慢通[附免费源码]
哈喽盆友们,今天带来《c语言》游戏中[三子棋boss]速通教程!我们的目标是一边编写博文,一边快速用c语言实现三子棋游戏。准备好瓜子,我们计时开始! 前期规划 在速通中,我们必须要有清晰的前期规划…...
AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
centos 7 部署awstats 网站访问检测
一、基础环境准备(两种安装方式都要做) bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...
