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

// 組件----------->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ù)用來請求數(shù)據(jù)字典的數(shù)據(jù)，調(diào)用 getDicts() 函數(shù)，并使用傳入的 dictMeta.type 來獲取相應(yīng)類型的數(shù)據(jù)字典
        request(dictMeta) {
          return getDicts(dictMeta.type).then(res => res.data)
        },
      },
    },
  })
}

export default {
  install,
}

<el-select
              clearable
              v-model="queryForm.statusCd"
              placeholder="請選擇"
              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)字典