Vue字典配置_全局字典数据获取、快速转义
# 一、需求说明
在很多的数据列表中，经常有些字典后端会一个特定的数值或字符串，让你通过某个接口去获取数据，进行转义。
如现在有一个数据列表，要显示字段**姓名、部门名称、状态文本**，而后端的接口只返回了**姓名、部门ID，状态值**。
**后端返回数据格式**
```json
[
{
name: "张三",
deptId: 1,
status: 0
},
{
name: "李四",
deptId: 2,
status: 1
}
]
```
其中部门名称需要通过部门列表接口获取部门列表数据，再从部门列表中找到与部门ID匹配的部门名称
**部门列表数据**
```json
[
{
id: 1,
name: "信息部"
},
{
id: 2,
name: "人力资源部"
}
]
```
状态文本需要通过状态结果字典进行翻译。
**状态结果字典**
```json
[
{
label: "启用",
value: 0
},
{
label: "禁用",
value: 1
}
]
```
# 二、解决方案
1. 安装字典管理插件
```
npm i [email protected] --save
```
2. 在项目src文件加内建立字典配置文件（如：src/dict/index.js），内容如下：
```js
import Vue from 'vue'
import VueEasyDict from 'vue-easy-dict'
import { selectDict } from '@/api/dict'
import { getDeptList } from '@/api/dept'
Vue.use(VueEasyDict, {
types: [
{
dictKey: 'status',
data: [
{ label: '启用', value: 0, color: 'green' },
{ label: '禁用', value: 1, color: 'red' }
]
},
{
dictKey: 'dept',
data() {
return new Promise((resolve) => {
getDeptList().then(res => {
resolve(res.data)
})
})
},
labelField: 'name',
valueField: 'id'
},
{ // 未配置data的字典配置，将通过外层的defaultData获取
dictKey: 'sex'
}
],
// 如果某个字典配置未配置data，则会使用当前方法获取数据
defaultData(dictKey) {
return new Promise((resolve) => {
selectDict({dictKey}).then(res => {
resolve(res.data)
})
})
},
})
```
3. 在项目main.js中导入字典配置文件
```js
import Vue from 'vue'
import App from './App.vue'
import './dict' // 导入字典配置文件
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
```
4. 列表页面使用字典
```vue
```
效果展示：
更多使用说明查看插件npm主页（https://www.npmjs.com/package/vue-easy-dict）