当前位置: 首页 > news >正文

项目练习:若依管理系统字典功能-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.lryc.cn/news/521850.html

相关文章:

  • apache-skywalking-apm-10.1.0使用
  • 计算机视觉算法实战——视频分析(Video Analysis)
  • 全网首发:编译libssh,产生类似undefined reference to `EVP_aes_256_ctr@OPENSSL_1_1_0‘的大量错误
  • 用python实战excel和word自动化
  • 【云计算】OpenStack云计算平台
  • 好用的php商城源码有哪些?
  • docker安装Nginx UI
  • 为深度学习创建PyTorch张量 - 最佳选项
  • 详解数据增强中的平移shft操作
  • CCLINKIE转ModbusTCP网关,助机器人“掀起”工业智能的“惊涛骇浪”
  • 类型安全与代码复用的C# 泛型
  • 卷积神经05-GAN对抗神经网络
  • vscode使用Marscode编程助手
  • 网络分析仪测试S参数
  • docker mysql5.7如何设置不区分大小写
  • 【1】Word:邀请函
  • 【gin】中间件使用之jwt身份认证和Cors跨域,go案例
  • 【JAVA实战】@FeignClient注解类通用请求封装
  • [c语言日寄]精英怪:三子棋(tic-tac-toe)3命慢通[附免费源码]
  • GORM(Go语言数据交互库)
  • Redis主从同步是怎么实现的?
  • Flutter中Get.snackbar避免重复显示的实现
  • [Qt]常用控件介绍-多元素控件-QListWidget、QTableWidget、QQTreeWidget
  • 深入Android架构(从线程到AIDL)_32 JNI架构原理_Java与C的对接05
  • 【gRPC】clientPool 客户端连接池简单实现与go案例
  • Android 15应用适配指南:所有应用的行为变更
  • 24-25-1-单片机开卷部分习题和评分标准
  • STM32第6章、WWDG
  • 汽车免拆诊断案例 | 2007 款法拉利 599 GTB 车发动机故障灯异常点亮
  • C语言-数据结构-队列