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