vue數(shù)據(jù)字典取鍵值方式

更新時間：2022年04月12日 15:59:50 作者：miaomiaotab

這篇文章主要介紹了vue數(shù)據(jù)字典取鍵值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue數(shù)據(jù)字典取鍵值

首先：項(xiàng)目里的數(shù)據(jù)字典路由已經(jīng)配好

進(jìn)入項(xiàng)目頁面

引入數(shù)據(jù)字典

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

創(chuàng)建前獲取到字典

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

設(shè)置el下拉框

注意上面的寫法是錯誤的，注意：key，：label, :value值

搜索列表也顯示

vue項(xiàng)目的字典問題

我們在項(xiàng)目中經(jīng)常會遇到一個字典問題，就是一個從后臺獲取的一個固定的數(shù)組，然后在系統(tǒng)中的很多地方都會通過select選擇框用到。如果每次用的時候獲取，就會經(jīng)常出現(xiàn)兩個問題：

1.這個數(shù)組數(shù)據(jù)量過大的時候，有可能點(diǎn)擊select下拉框，數(shù)據(jù)還沒有返回來，導(dǎo)致select無法選擇；

2.每次都重新請求后臺，當(dāng)數(shù)據(jù)量過大，且同一頁面其他接口也比較多時，導(dǎo)致頁面加載緩慢。

那怎么解決呢？如下：

在utils中寫一個dict.js的文件

內(nèi)容如下：

//系統(tǒng)中封裝好的axios
import { httpPost } from '@/utils/axios'
export function getDict(obj) {
?? ?//這個dictList中的鍵名都是字典名稱，即傳入對應(yīng)名稱可獲取對應(yīng)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方法

并對字典進(jìn)行全局聲明：

import { getDict } from "@/utils/dict.js"
Vue.prototype.$dictObject = {}
getDict(Vue.prototype.$dictObject)

之后我們就可以在系統(tǒng)中使用

“$dictObject.字典名” 來代替對應(yīng)的list了：

?<el-form-item label="專業(yè)" prop="majorId">
? ? ? ? ? ? ? ?<el-select v-model="dataForm.majorId" placeholder="請選擇專業(yè)">
? ? ? ? ? ? ? ? ? <el-option
? ? ? ? ? ? ? ? ? ? v-for="item in $dictObject.major"
? ? ? ? ? ? ? ? ? ? :key="item.id"
? ? ? ? ? ? ? ? ? ? :label="item.dictName"
? ? ? ? ? ? ? ? ? ? :value="item.id">
? ? ? ? ? ? ? ? ? </el-option>
? ? ? ? ? ? ? ? </el-select>
? ? ? ? ? ? </el-form-item>

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: