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

ops/2025/1/17 5:03:04/

文章目录

  • 一、情景说明
  • 二、若依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.ppmy.cn/ops/150718.html

相关文章

Unity3D手机游戏发热发烫优化指南与技巧详解

前言 在移动游戏开发领域&#xff0c;游戏发热和发烫问题一直是影响用户体验的重要因素。对于Unity3D开发者来说&#xff0c;优化游戏以减少设备发热和提升性能至关重要。本文将详细介绍Unity3D手机游戏发热发烫的优化指南与技巧&#xff0c;并提供相应的技术详解和代码实现。…

GPT Notes 3.2.1.2 | 最强GPT解锁会员版无需登录无限制使用

GPT Notes是一款功能强大的AI智能软件&#xff0c;提供无需登录的永久会员体验&#xff0c;满足用户在工作和学习中的各种需求。它支持语音识别&#xff0c;帮助用户轻松撰写文章、解答问题&#xff0c;并具备语音转文字、图片识别等几十种AI功能。打开即享会员特权&#xff0c…

校园跑腿小程序--我的,登录和注册页面开发

hello hello~ &#xff0c;这里是 code袁~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生…

华为OD上机考试真题(Java)——字符串分割

题目&#xff1a; 给定一个字符串&#xff0c;只包含小写字母&#xff0c;字符串长度是 5-30。 求&#xff1a;是否存在两个节点&#xff0c;使得字符串被这两个节点分成三个部分&#xff0c;每个部分的 ASCII 码的值之和都相等。如果存在输出两个节点下标&#xff0c;以逗号隔…

快速、可靠且高性价比的定制IP模式提升芯片设计公司竞争力

作者&#xff1a;Karthik Gopal&#xff0c;SmartDV Technologies亚洲区总经理 智权半导体科技&#xff08;厦门&#xff09;有限公司总经理 无论是在出货量巨大的消费电子市场&#xff0c;还是针对特定应用的细分芯片市场&#xff0c;差异化芯片设计带来的定制化需求也在芯片…

淘宝 URL 采集商品详情数据及开发

一、通过淘宝开放平台&#xff08;如果有资质&#xff09; 注册成为淘宝开发者 访问淘宝开放平台官方网站&#xff0c;按照要求填写开发者信息&#xff0c;包括企业或个人身份验证等步骤。这一步是为了获取合法的 API 使用权限。 了解商品详情 API 淘宝开放平台提供了一系列…

高通骁龙8 Elite 2性能综合测评

骁龙8 Elite 2采用台积电N3P 3nm工艺制程&#xff0c;与N3E相比&#xff0c;在相同功耗下性能提升约4%&#xff0c;相同时钟频率下功耗降低约9%&#xff0c;晶体管密度提高4%。这使得芯片在性能和能效方面取得了较好的平衡&#xff0c;为手机的续航和长时间高性能运行提供了有力…

浅谈计算机网络02 | SDN控制平面

计算机网络控制平面 一、现代计算机网络控制平面概述1.1 与数据平面、管理平面的关系1.2 控制平面的发展历程 二、控制平面的关键技术剖析2.1 网络层协议2.1.1 OSPF协议2.1.2 BGP协议 2.2 SDN控制平面技术2.2.1 SDN架构与原理2.2.2 OpenFlow协议2.2.3 SDN控制器 一、现代计算机…