当前位置：首页 > article >正文

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

article 2025/1/16 0:40:52

文章目录

一、情景说明
二、若依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-radio
                v-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>