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 18 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
Content-type 的说明
2006/10/09 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
DOM 高级编程
2015/05/06 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
setTimeout时间设置为0详细解析
2018/03/13 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
Python学习笔记之常用函数及说明
2014/05/23 Python
python操作gmail实例
2015/01/14 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
用Python逐行分析文件方法
2019/01/28 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python实现大学人员管理系统
2019/10/25 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
django迁移文件migrations的实现
2020/03/31 Python
如何完美的建立一个python项目
2020/10/09 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
2014年学前班工作总结
2014/12/08 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
Python matplotlib绘制雷达图
2022/04/13 Python
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL