vue数据字典取键值方式

 更新时间:2022年04月12日 15:59:50   作者:miaomiaotab  
这篇文章主要介绍了vue数据字典取键值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue数据字典取键值

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

进入项目页面

引入数据字典

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

创建前获取到字典

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

设置el下拉框

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

搜索列表也显示

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之父子组件传值

    详解Vue之父子组件传值

    这篇文章主要介绍了Vue之父子组件传值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue的自定义指令传参方式

    vue的自定义指令传参方式

    这篇文章主要介绍了vue的自定义指令传参方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    vue+springboot前后端分离实现单点登录跨域问题解决方法

    这篇文章主要介绍了vue+springboot前后端分离实现单点登录跨域问题的解决方法,需要的朋友可以参考下
    2018-01-01
  • vue-cli3脚手架的配置及使用教程

    vue-cli3脚手架的配置及使用教程

    这Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。篇文章主要介绍了vue-cli3脚手架的配置以及使用,需要的朋友可以参考下
    2018-08-08
  • vue-video-player实现实时视频播放方式(监控设备-rtmp流)

    vue-video-player实现实时视频播放方式(监控设备-rtmp流)

    这篇文章主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue 3 中使用 vue-router 进行导航与监听路由变化的操作

    Vue 3 中使用 vue-router 进行导航与监听路由变化的操作

    在Vue3中,通过useRouter和useRoute可以方便地实现页面导航和路由变化监听,useRouter允许进行页面跳转,而useRoute结合watch可以根据路由变化更新组件状态,这些功能为Vue3应用增加了灵活性和响应性,使得路由管理更加高效
    2024-09-09
  • 部署Vue项目到服务器后404错误的原因及解决方案

    部署Vue项目到服务器后404错误的原因及解决方案

    文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是由于历史模式问题导致的,解决方法是修改Nginx配置,将所有页面请求重定向到index.html,并在Vue应用中覆盖所有路由情况
    2025-02-02
  • 在Vue项目中集成和使用Lottie动画库的步骤详解

    在Vue项目中集成和使用Lottie动画库的步骤详解

    Lottie 是一个由 Airbnb 开源的动画库,它允许你在 Web、iOS、Android 等平台上使用体积小、高性能的体验丰富的矢量动画,本文将详细介绍在 Vue 项目中如何集成和使用 Lottie,文中有详细的代码讲解,需要的朋友可以参考下
    2023-11-11
  • Vue循环组件加validate多表单验证的实例

    Vue循环组件加validate多表单验证的实例

    今天小编就为大家分享一篇Vue循环组件加validate多表单验证的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果的实例代码

    这篇文章主要介绍了Vue 使用计时器实现跑马灯效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07

最新评论