[vue 进阶] 关于dicts字典的用法

江海寄余生_

已于 2023-03-27 09:01:15 修改

阅读量2.2w

点赞数 25

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2021-12-28 09:59:41 首次发布

本文链接：https://blog.csdn.net/u013034585/article/details/122185684

版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在若依框架中自定义字典数据获取方式，通过创建混入和组件，简化了页面间切换时的调用。首先定义字典接口，然后在公共方法文件中提供处理字典数据的类，接着在组件库中添加组件并挂载，最后在main.js中全局注册，以便在各个组件中便捷使用。这种方式提高了代码的复用性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在使用若依框架开发小项目的时候，发现在项目中频繁使用到字典，原本代码中的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 作为调用。具体为嘛加上这个前缀还未弄清楚，待研究。