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 相关文章推荐
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue使用element-ui按需引入
May 20 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绘制圆形的方法
2015/01/24 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
基于Python打造账号共享浏览器功能
2019/05/30 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python中有几个关键字
2020/06/04 Python
PyTorch的torch.cat用法
2020/06/28 Python
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
AOP的定义以及作用
2013/09/08 面试题
亿企通软件测试面试题
2012/04/10 面试题
销售代表求职自荐信
2013/10/01 职场文书
自荐信范文
2013/12/10 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
初三物理教学反思
2014/01/21 职场文书
考试保密承诺书
2014/08/30 职场文书
学校运动会广播稿
2014/10/11 职场文书
2015元旦节寄语
2014/12/08 职场文书
党支部季度考核意见
2015/06/02 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python