vue3-element-dict

# 字典包配置

目录结构这篇文章中字典配置文件涉及到字典配置，此篇文章详细介绍可配置项。

src下新建文件dict-config.ts，用于配置字典包相关配置。配置项如下

字段 类型 必传 说明 默认值
getDictCodeApi Promise 是 请求字典接口 —
version String 是 当前字典包版本号 必传 —
localDictCodes Object 否 本地字典数据 {}
versionKey String 否 在浏览器缓存的版本号键名 vue3ElementDictVersion
dictDataKey String 否 在浏览器缓存的字典数据键名 vue3ElementDictData
query String 否 请求字典接口的参数名 dictType
format Object 否 配置字典值和显示 字段的配置项 需同时配置 不可只配一个 {label: "label", value: "value"}
formatterDictList Function 否 data为请求字典接口后返回的data数据 格式化返回字典数据，此处return的为字典数据，用于兼容返回的数据结构与默认不一致问题， 选传 默认返回 data.dictData query为请求的字典类型的参数，用于部分接口不按要求，没返回 dictType: [{},{}] 数据结构的形式，此时可利用query自行拼凑成符合的数据格式 (data, query) => {return data.dictData}
formatterDictVersion Function 否 data为请求字典接口后返回的data数据 格式化返回版本号，用于兼容返回的数据结构与默认不一致问题 默认返回 data.dictVersion 获取到版本号后会 与字典包配置的版本号进行比对 (data) => {return data.dictVersion}
filterDataFun Function 否 可对返回的字典数据进行过滤 list为某字典类型的数据 （list) => {return list}
disabledDataFun Function 否 可对返回的字典数据配置禁用字段 list为某字典类型的数据 (list) => {return list}
formatterRequest Function 否 兼格式化请求体，用于兼容接口需要的参数格式，默认dictType为空时 获取全部字典数据，接口需要获取多种字典数据时不同后端开发人员可能需要的格式不一样，因此此处可配置成后端开发人员需要的格式 (query, dictType) => {if(!dictType){return { [query]: "" }} return { [query]: dictType }}
storage storage 否 数据缓存的位置 默认 localstorage 可选为 sessionstorage 兼容 localstorage
usuallyGetFileds String 否 经常用到的字典数据，一进项目就会对缓存字典中无此类型的字典数据进行请求，此配置项在iframe项目中能发挥更大作用，进页面就一次性将全部字典数据一个接口请求掉，避免同时请求太多字典接口 宣传 默认空 多个字典以 英文逗号隔开 如 sex,personType ""
isGetAll Boolean 否 获取所有字典类型接口 无传值获取所有字典接口，如果无传与真实需要获取全部字典接口的入参不一致 可配置 formatterRequest false
getDictEveryTime Boolean 否 是否每次进项目都请求 usuallyGetFileds 字典类型的接口 或者获取所有字典类型接口 false
treeSetting Object 否 树形相关数据配置 继续阅读文档

localDictCodes的格式及字典数据的的格式如下

export default {
  SEX: [
    {
      value: "1",
      label: "男"
    },
    {
      value: "2",
      label: "女"
    },
    {
      value: "3",
      label: "未知"
    }
  ],
  niceOrBad: [
    {
      "value": "0",
      "label": "好"
    }, {
      "value": "1",
      "label": "差"
    }
  ],
  area: [
    {
      "id": "110000",
      "parentId": "0",
      "label": "北京"
    },
    {
      "id": "110100",
      "parentId": "0",
      "label": "北京市"
    },
    {
      "id": "110101",
      "parentId": "110100",
      "areaName": "东城区"
    },
    {
      "id": "110102",
      "parentId": "110100",
      "areaName": "西城区"
    },
    {
      "id": "110105",
      "parentId": "110100",
      "areaName": "朝阳区"
    }
  ]
}

WARNING

localDictCodes本地配置的value及label 以及 树形结构的 label及id须与dict-config中的一致

接口返回的字段的数据也同理

# treeSetting配置

字段 类型 必传 说明 默认值
idField String 否 树形数据值的键名 id
parentIdField String 否 父节点的键名 parentId
childrenField String 否 生成的树形结构子节点的字段名 children
firstId String，Number 否 根节点的值 “0”
labelField String 否 显示的值的字段名 label
labelArrField String 否 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级label,...,自己的label】 labelArr
idArrField String 否 字典包会将数组转化为树形结构数据 并每一项生成 labelArr字段，内容为【爷爷级/父级id,...,自己的id】 idArr
levelField String 否 给对象新增的层级字段名 level
level Number 否 配置根目录的层级 0
leafField String 否 是否叶子节点的字段名 值为boolean leaf

# 在main.ts中的使用

import { createApp } from "vue";
import App from "./App.vue";
// 引入组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import {getGlobalConfigApi} from "@/api/modules/common-api.ts"

import router from './router'
const app = createApp(App);
app.use(router)
app.use(ElementPlus)
// 引入图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
// 引入字典包配置
import dictConfig from "./dict-config"
import vue3ElementDict from "vue3-element-dict";

getGlobalConfigApi().then(data => {
  dictConfig.version = data.dictVersion
  app.use(vue3ElementDict, dictConfig); //注册
  app.mount("#app");
})

至此已全部配置完成，就可以轻松使用了。

# 常见问题

  1. 后端无返回版本号时怎么办。

    /* 
答：当后端无返回版本号时，可将版本号写死固定，如0.0.1，且使用formatterDictVersion格式化返回版本号数据写死 0.0.1（必须和前面一致）。

具体使用方法 如下：
*/

//  src/api/modules/common-api.ts
//获取全局配置  包含版本号
export function getGlobalConfigApi() {
  return new Promise((resolve, reject) => {
    resolve({dictVersion: "0.0.1"})
  })
}

// src/dict-config.js 文件
import {getDictCodeApi} from "@/api/module/common-api.ts"
import localDictCodes from "@/assets/data/dict.ts"
export default {
    getDictCodeApi, //必传 获取字典数据接口
    localDictCodes, //选填 项目写死的字典数据
    formatterDictVersion: (data) => {
        //data为 经过 axios 响应处理后返回的 第一级数据
        return "0.0.1"
    }
}

//以上操作即可解决后端接口无返回版本号问题，实现方法很多，以上方法为遵循文档推荐代码的解决方式

  2. 后端字典接口正常请求，但是返回数据与文档要求格式不一致怎么办？

    /*
答：此包拥有诸多配置，面对后端人员不配合修改接口返回格式时，部门字典包无能为力。此包就针对这个问题，实现对接口返回数据进行操作。让各种各样的接口数据经过您优秀的数据操作，都能适配此字典包。

具体如下：
*/

// src/dict-config.js 文件
import {getDictCodeApi} from "@/api/module/common-api.js"
import localDictCodes from "@/assets/data/dict.js"
export default {
    getDictCodeApi, //必传 获取字典数据接口
    localDictCodes, //选填 项目写死的字典数据
    formatterDictList: (data, query) => {
        //data为 经过 axios 响应处理后返回的 第一级数据
        const dictCodeList = 一系列操作后 .....
        return dictCodeList
    }
}

  3. 后端请求格式与字典包要求的不一致怎么办？

    /*
答：此包拥有诸多配置，面对后端人员不愿意修改请求参数来适配字典包，部门字典包无能为力。此包就针对这个问题，实现对请求参数数据进行操作。让请求参数能适配此字典包。

具体如下：
*/

// src/dict-config.js 文件
import {getDictCodeApi} from "@/api/module/common-api.js"
import localDictCodes from "@/assets/data/dict.js"
export default {
    getDictCodeApi, //必传 获取字典数据接口
    localDictCodes, //选填 项目写死的字典数据
    formatterRequest: (query, data) => {
        //query 为字典类型参数   如  type: "AAC004" 中的type
        //data  为字典类型数据   如  type: "AAC004" 中的AAC004
        const req = 一系列操作后 .....
        return req
    }
}

  4. 此字典组件使用后会调用多次接口且每个接口只请求一个字典类型的数据，能让他们在同个接口请求？

    /*
答：针对这个问题，此包已经有预判到了，所以有个usuallyGetFileds配置项，用来配置经常请求的字典类型，这种情况下，这些字典数据就会在同个接口请求。当然如果在整个项目上或多或少 会有部分字典数据 不在usuallyGetFileds范畴内。不过此字段已经大大的解决了您的问题。
如果是项目是供iframe作为单个功能页使用，可将页面上所有使用到的字典数据配置起来就能完全达到您的要求。
*/

  5. 后端接口返回数据格式一致，但是字段名不一致，我该如何处理？

    /*
答：format配置项可以解决您的问题。
具体如下
*/

// src/dict-config.js 文件
import {getDictCodeApi} from "@/api/module/common-api.js"
import localDictCodes from "@/assets/data/dict.js"
export default {
    getDictCodeApi, //必传 获取字典数据接口
    localDictCodes, //选填 项目写死的字典数据
    format: {value: "后端返回的value", label: "后端返回的label"}
}
上次更新: 5/12/2023, 1:10:57 AM

← select-dict选择器 →