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+iview分页组件的封装
Nov 17 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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 array_slice函数的使用以及参数详解
2008/08/30 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
js的with语句使用方法
2007/09/21 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python实现大文件分割与合并
2019/07/22 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
中药专业大学生医药工作求职信
2013/10/25 职场文书
毕业生求职推荐信
2013/11/04 职场文书
南京导游词
2015/02/03 职场文书
2015年市场部工作总结
2015/04/30 职场文书
大学团日活动总结书
2015/05/11 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
Go 中的空白标识符下划线
2022/03/25 Golang