vue中dicts怎么使用

1.确定字典获取的接口

// 根据字典类型查询字典数据信息
export function getDicts(dictType) {
  return request({
    url: '/system/dict/data/type/' + dictType,
    method: 'get'
  })
}

2.在公共的方法文件中提供一个方法
目录在 /src/utils/dict/DictData.js

/**
 * @classdesc 字典数据
 * @property {String} label 标签
 * @property {*} value 标签
 * @property {Object} raw 原始数据
 */
export default class DictData {
  constructor(label, value, raw) {
    this.label = label
    this.value = value
    this.raw = raw
  }
}

3.添加DictData组件

import Vue from 'vue'
import DataDict from '@/utils/dict'
import { getDicts as getDicts } from '@/api/system/dict/data'

function install() {
  Vue.use(DataDict, {
    metas: {
      '*': {
        labelField: 'dictLabel',
        valueField: 'dictValue',
        request(dictMeta) {
          return getDicts(dictMeta.type).then(res => res.data)
        },
      },
    },
  })
}

export default {
  install,
}

4.在main.js中挂载

// 字典数据组件
import DictData from '@/components/DictData'
DictData.install()

5.在需要下拉字典数据的组件中使用

<el-select>
   <el-option 
	 v-for="dict in dict.type.dict_xxx"
	 :key="dict.value"
	 :label="dict.label"
	 :value="dict.value"
    />
</el-select>

export default {
  name: "xxx",
  dicts: ['dict_xxx'],
 }

参考地址：https://blog.csdn.net/u013034585/article/details/122185684?utm_source=miniapp_weixin

https://blog.csdn.net/jl15988/article/details/132909200?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171559126716800222826184%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171559126716800222826184&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_blogfirst_rank_ecpm_v1~times_rank-7-132909200-null-null.nonecase&utm_term=vue%E7%9A%84dicts%E6%80%8E%E4%B9%88%E4%BD%BF%E7%94%A8&spm=1018.2226.3001.4450