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)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue之父子組件傳值，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue的自定義指令傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題解決方法
這篇文章主要介紹了vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題的解決方法,需要的朋友可以參考下2018-01-01
這Vue CLI 是一個基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)。篇文章主要介紹了vue-cli3腳手架的配置以及使用,需要的朋友可以參考下2018-08-08
vue-video-player實(shí)現(xiàn)實(shí)時視頻播放方式(監(jiān)控設(shè)備-rtmp流)
這篇文章主要介紹了vue-video-player實(shí)現(xiàn)實(shí)時視頻播放方式(監(jiān)控設(shè)備-rtmp流)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue?3?中使用?vue-router?進(jìn)行導(dǎo)航與監(jiān)聽路由變化的操作
在Vue3中,通過useRouter和useRoute可以方便地實(shí)現(xiàn)頁面導(dǎo)航和路由變化監(jiān)聽,useRouter允許進(jìn)行頁面跳轉(zhuǎn),而useRoute結(jié)合watch可以根據(jù)路由變化更新組件狀態(tài),這些功能為Vue3應(yīng)用增加了靈活性和響應(yīng)性,使得路由管理更加高效2024-09-09
部署Vue項(xiàng)目到服務(wù)器后404錯誤的原因及解決方案
文章介紹了Vue項(xiàng)目部署步驟以及404錯誤的解決方案,部署步驟包括構(gòu)建項(xiàng)目、上傳文件、配置Web服務(wù)器、重啟Nginx和訪問域名,404錯誤通常是由于歷史模式問題導(dǎo)致的,解決方法是修改Nginx配置,將所有頁面請求重定向到index.html,并在Vue應(yīng)用中覆蓋所有路由情況2025-02-02
在Vue項(xiàng)目中集成和使用Lottie動畫庫的步驟詳解
Lottie 是一個由 Airbnb 開源的動畫庫,它允許你在 Web、iOS、Android 等平臺上使用體積小、高性能的體驗(yàn)豐富的矢量動畫,本文將詳細(xì)介紹在 Vue 項(xiàng)目中如何集成和使用 Lottie,文中有詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11
Vue循環(huán)組件加validate多表單驗(yàn)證的實(shí)例
今天小編就為大家分享一篇Vue循環(huán)組件加validate多表單驗(yàn)證的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue 使用計時器實(shí)現(xiàn)跑馬燈效果的實(shí)例代碼
這篇文章主要介紹了Vue 使用計時器實(shí)現(xiàn)跑馬燈效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07