[vue 进阶] 关于dicts字典的用法_小钿钿不忘初心

网络 02-07 1992

前言

在使用若依框架开发小项目的时候，发现在项目中频繁使用到字典，原本代码中的dicts没有深入研究，故自己写了一个混入来实现想要的字典获取功能。但是觉得每次切换页面都需要调用一下，而且每个系统都有一个mixins混入文件，感觉维护起来稍显繁琐。继而研究了一下dicts的用法，记录一下使用过程。

1.首先确定字典的接口，在若依框架中如下，具体可根据自己后端提供的字典接口进行修改 // 根据字典类型查询字典数据信息 export function getDicts(dictType) { return request({ url: '/system/dict/data/type/' + dictType, method: 'get' }) }

此段代码在公共的api目录下

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.在组件库中添加该组件

目录/src/components/DictData/index.js

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.使用 export default { name: "xxx", dicts: ['dict_xxx'], }

该字典在使用中作为select下拉内容，则使用dict.type.dict_xxx 作为调用。具体为嘛加上这个前缀还未弄清楚，待研究。