快捷導(dǎo)航

vue中數(shù)據(jù)字典dicts的簡(jiǎn)單說(shuō)明和用法介紹

更新時(shí)間：2024年01月10日 14:57:56 作者：small?red?red

這篇文章主要給大家介紹了關(guān)于vue中數(shù)據(jù)字典dicts的簡(jiǎn)單說(shuō)明和用法的相關(guān)資料,如果您想在Vue中使用字典查詢,您可以使用Vue的計(jì)算屬性和方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、什么是數(shù)據(jù)字典？

字典（dictionary）是一種數(shù)據(jù)結(jié)構(gòu)，用于存儲(chǔ)鍵-值對(duì)。字典是一個(gè)無(wú)序的集合，通過(guò)鍵來(lái)索引值。一般來(lái)說(shuō)，在Python中，字典用花括號(hào) {}標(biāo)識(shí)，鍵值之間用冒號(hào)：分隔，鍵-值對(duì)之間使用，分割。而在vue前端項(xiàng)目的開(kāi)發(fā)中，也會(huì)使用到dicts字典。

二、數(shù)據(jù)字典的使用

1、字典初始化

// 字典數(shù)據(jù)組件----------->main.js
import DictData from '@/components/DictData'
// 字典組件掛載到Vue上當(dāng)做插件使用
DictData.install()

2、字典組件定義

// 組件----------->components/DictData/index.js
import Vue from 'vue'
 //引入DataDict的模塊或工具，包含數(shù)據(jù)字典相關(guān)的功能
import DataDict from '@/utils/dict' 
//查詢字典的方法（獲取數(shù)據(jù)的接口）
import { getDicts as getDicts } from '@/api/system/dict/data'

function install() {
//把DataDict當(dāng)作一個(gè)插件安裝到Vue實(shí)例中
  Vue.use(DataDict, {
//數(shù)據(jù)字典元信息
    metas: {
    //'*'表示這是一個(gè)通用配置，適用于所有數(shù)據(jù)字典
      '*': {
    //labelField 和 valueField 是用于指定數(shù)據(jù)字典項(xiàng)中標(biāo)簽和值的字段名
        labelField: 'dictLabel',
        valueField: 'dictValue',
    //這個(gè)函數(shù)用來(lái)請(qǐng)求數(shù)據(jù)字典的數(shù)據(jù)，調(diào)用 getDicts() 函數(shù)，并使用傳入的 dictMeta.type 來(lái)獲取相應(yīng)類型的數(shù)據(jù)字典
        request(dictMeta) {
          return getDicts(dictMeta.type).then(res => res.data)
        },
      },
    },
  })
}

export default {
  install,
}

其中，@/utils/dict文件里面主要是數(shù)據(jù)字典的一些方法，對(duì)于字典數(shù)據(jù)，標(biāo)簽，原始數(shù)據(jù)的處理；

'@/api/system/dict/data文件里面主要是字典接口，用于獲取字典數(shù)據(jù)

3、使用數(shù)據(jù)字典

<el-select
              clearable
              v-model="queryForm.statusCd"
              placeholder="請(qǐng)選擇"
              filterable
              size="small"
            >
              <el-option
                v-for="dict in dict.type.order_select_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>

 dicts: ["order_select_status"], //引入狀態(tài)字典

其中，order_select_status則是數(shù)據(jù)字典直接引用的“狀態(tài)字典”

另外，還可自定義字典函數(shù)，這里就不做介紹了。

寫(xiě)在最后：

什么是若依框架：若依框架就是一個(gè)后臺(tái)管理框架，主要使用技術(shù)在官網(wǎng)可查，這里簡(jiǎn)要敘述：主要技術(shù)分別是基于springboot、shiro、mybatis、Thymeleaf等，這個(gè)后臺(tái)管理框架可以實(shí)現(xiàn)零代碼開(kāi)發(fā)，它能讓我們大部分時(shí)間放在業(yè)務(wù)開(kāi)發(fā)上面，節(jié)省一些不必要的時(shí)間，降低技術(shù)難度，與開(kāi)發(fā)成本。其中，也會(huì)在項(xiàng)目中大量用到字典。

到此這篇關(guān)于vue中數(shù)據(jù)字典dicts的簡(jiǎn)單說(shuō)明和用法介紹的文章就介紹到這了,更多相關(guān)vue數(shù)據(jù)字典dicts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: