vue数据字典取键值方式

目录
  • vue数据字典取键值
  • vue项目的字典问题
    • 在utils中写一个dict.js的文件
    • 在main.js中引用刚才封装好的getDict方法
    • 之后我们就可以在系统中使用

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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue项目数据动态过滤实践及实现思路

    这个问题是在下在做一个Vue项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -.-),过程中会涉及到一些Vue源码的概念比如 $mount . render watcher 等 问题是这样的:页面从后台拿到的数据是由 0 . 1 之类的key,而这个key代表的value比如 0-女 . 1-男 的对应关系是要从另外一个数据字典接口拿到的:类似于这样的Api: { "SEX_TYPE": [ { "paramValue":

  • Vue实现表格中对数据进行转换、处理的方法

    众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在Vue中,如果采用了element等组件,利用数据绑定的特性,也是很难对表格遍历的数据进行单独行的处理的. 我们这边取一个例子来说.比如Mysql datetime 类型的数据与我们一般的显示的形式是不一样的,为了用户更好的体验,势必需要对时间格式进行转换的. 下图是从mysql中默认取出的date

  • vue数据字典取键值方式

    vue数据字典取键值方式

    目录 vue数据字典取键值 vue项目的字典问题 在utils中写一个dict.js的文件 在main.js中引用刚才封装好的getDict方法 之后我们就可以在系统中使用 vue数据字典取键值 首先:项目里的数据字典路由已经配好 进入项目页面 引入数据字典 import { getTypeValue } from '@/api/dict/dictValue/index'; 创建前获取到字典 getTypeValue('org_attr_type').then(response => { thi

  • Python字典取键、值对的方法步骤

    1. 取键:keys()方法 #spyder bb={'人才/可怕':23,'伏地魔&波特':'army','哈哈哈,人才,回合':'hhh'} for ii in bb.keys(): print(ii) #输出: #人才/可怕 #伏地魔&波特 #哈哈哈,人才,回合 2. 取值:values()方法 for jj in bb.values(): print(jj) #输出 #23 #army #hhh 3. 取键值对:items()方法 for kk,vv in bb.items():

  • Vue中如何使用Map键值对传参详析

    目录 Vue里使用Map键值对传参 补充:vue遍历Map,Map在vue中的使用方法 总结 Vue里使用Map键值对传参 问题描述:在参数传递时时候Map键值对key:value的形式进行传参. 1.date数据区定义声明map变量和中间数据变量temp: data(){ return{ //其他代码 map:'', temp:[] } }, 2.methods方法区接口传值:声明map为Map变量,接收接口传过来的key数据生成表单项数据项: this.map=new Map() 即: //

  • Vue 同步异步存值取值实现案例

    1.vue中各个组件之间传值 1.父子组件 父组件–>子组件,通过子组件的自定义属性:props 子组件–>父组件,通过自定义事件:this.emit(′事件名′,参数1,参数2,...); 2.非父子组件或父子组件通过数据总数Bus,this.root.$emit('事件名',参数1,参数2,-) 3.非父子组件或父子组件 更好的方式是在vue中使用vuex 方法1: 用组件之间通讯.这样写很麻烦,并且写着写着,估计自己都不知道这是啥了,很容易写晕. 方法2: 我们定义全局变量.模块a的数据

  • MyBatis中foreach标签的collection属性的取值方式

    目录 foreach标签的collection属性的取值 传的是List列表 传的是Array数组 传的是Map collection属性总结 MyBatis使用foreach标签报错 原因 解决方案 foreach标签的collection属性的取值 传的是List列表 接口代码 List<Emp> findEmpByDeptnos(List<Integer> deptnos); xml配置代码 <select id="findEmpByDeptnos"

  • JSON创建键值对（key是中文或者数字）方式详解

    先准备好一个空的json对象 var obj = {}; 1. 最原始的方法 obj.name = 'zhangsan'; //这种方式很简单的添加了一个键值对 //输出:{name:"zhangsan"} //缺点:这边的name不能是对象 /* 比如: var name = 'tom'; obj.name = 'zhangsan'; 输出obj:{name:'zhangsan'} 中文可以使用,但是数字不能使用 obj.家="中国"; obj.88(不能这么使用

  • C# http系列之以form-data方式上传多个文件及键值对集合到远程服务器

    系列目录 [已更新最新开发文章,点击查看详细] 类似于以下场景,将表单中的用户信息(包含附件)上传到服务器并保存到数据库中, <form id="form1" runat="server" action="UserManageHandler.ashx" method="post" enctype="multipart/form-data"> <div> 名称: <input t

  • 解决vue attr取不到属性值的问题

    js: $(document).ready(function() { $.get("/account/authGroupInfo",{id:groupId}, function(data) { var arr = data.data.rules.split(","); console.log(arr); $.get("/account/allRule",{}, function(result) { ruleList.options = resul

  • vue树形结构获取键值的方法示例

    本文介绍了vue树形结构获取键值的方法示例,分享给大家,具体如下: 把键值文件放入 引入控件 import { getTypeValue } from '@/api/dict/dictValue/index'; 点击搜索,打开弹窗 <el-form-item label="机构名称" placeholder="请选择机构" prop="orgName"> <el-input readonly type="text&qu

  • python接口测试返回数据为字典取值方式

    python接口测试返回数据为字典取值方式

    目录 接口测试返回数据为字典取值 实例 python接口测试--sign签名 接口签名规范 实现代码 接口测试返回数据为字典取值 接口测试通常需要校验返回数据跟预期结果是否一致,这个时候如果返回数据为字典,那么我们要拿到我们想要的key对应的values时,需巧妙的运用dict.keys().dict.values()和for循环,以及列表相关知识点. 实例 这是我调接口返回的数据,该数据为dict类型,我的目标是要拿到account. #接口返回的数据: api_result = {'code

随机推荐