vue数据字典取键值项目的字典问题


Posted in Vue.js onApril 12, 2022

vue数据字典取键值

首先:项目里的数据字典路由已经配好

vue数据字典取键值项目的字典问题

vue数据字典取键值项目的字典问题

进入项目页面

vue数据字典取键值项目的字典问题

引入数据字典

import { getTypeValue } from '@/api/dict/dictValue/index';

vue数据字典取键值项目的字典问题

创建前获取到字典

getTypeValue('org_attr_type').then(response => {
  this.attrTypeOptions = response.data.rows;
});

vue数据字典取键值项目的字典问题

设置el下拉框

vue数据字典取键值项目的字典问题

注意上面的写法是错误的,注意:key,:label, :value值

vue数据字典取键值项目的字典问题

搜索列表也显示

vue数据字典取键值项目的字典问题

vue项目的字典问题

我们在项目中经常会遇到一个字典问题,就是一个从后台获取的一个固定的数组,然后在系统中的很多地方都会通过select选择框用到。如果每次用的时候获取,就会经常出现两个问题:

1.这个数组数据量过大的时候,有可能点击select下拉框,数据还没有返回来,导致select无法选择;

2.每次都重新请求后台,当数据量过大,且同一页面其他接口也比较多时,导致页面加载缓慢。

那怎么解决呢?如下:

在utils中写一个dict.js的文件

内容如下:

//系统中封装好的axios
import { httpPost } from '@/utils/axios'
export function getDict(obj) {
    //这个dictList中的键名都是字典名称,即传入对应名称可获取对应list
    const dictList = {
        graduateSchool: [],
        major: [],
        topDegree: [],
        sex: [],
        title: [],
        workUnit: [],
        place: [],
        expertType: [],
    }
    for (let k in dictList) {
        httpPost('/sysdict/findByDictType', { dictType: `${k}` })
            .then((res) => {
                obj[k] = res.data
            })
    }
}

在main.js中引用刚才封装好的getDict方法

并对字典进行全局声明:

import { getDict } from "@/utils/dict.js"
Vue.prototype.$dictObject = {}
getDict(Vue.prototype.$dictObject)

之后我们就可以在系统中使用

“$dictObject.字典名” 来代替对应的list了:

 <el-form-item label="专业" prop="majorId">
               <el-select v-model="dataForm.majorId" placeholder="请选择专业">
                  <el-option
                    v-for="item in $dictObject.major"
                    :key="item.id"
                    :label="item.dictName"
                    :value="item.id">
                  </el-option>
                </el-select>
            </el-form-item>
Vue.js 相关文章推荐
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
vue选项卡切换的实现案例
分享一个vue实现的记事本功能案例
vue代码分块和懒加载非必要资源文件
Apr 11 #Vue.js
vue打包时去掉所有的console.log
三种方式清除vue路由跳转router-link的历史记录
Apr 10 #Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 #Vue.js
You might like
php 获取可变函数参数的函数
2009/08/26 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
php中final关键字用法分析
2016/12/07 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
JS 常用校验函数
2009/03/26 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
layui表格实现代码
2017/05/20 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python图像常规操作
2017/11/11 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python实现flappy bird游戏
2018/12/24 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
结婚邀请函范文
2014/01/14 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis
德劲DE1105机评
2022/04/05 无线电
element tree树形组件回显数据问题解决
2022/08/14 Javascript