# 一、需求说明

在很多的数据列表中，经常有些字典后端会一个特定的数值或字符串，让你通过某个接口去获取数据，进行转义。

如现在有一个数据列表，要显示字段**姓名、部门名称、状态文本**，而后端的接口只返回了**姓名、部门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 vue-easy-dict@1.2.0 --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
   <template>
       <div>
             <div class="item" v-for="(item, index) in list" :key="index"> 
               <div>姓名：{{ item.name }}</div>
               <div>部门：{{ item.deptName }}</div>
               <div :style="{color: item.statusColor}">状态：{{ item.statusStr }}</div>
           </div>
       </div>
   </template>
   <script>
       import { getUserList } from '@/api/user' 
       export default {
           data() {
               return {
                   list: []
               }
           },
           async mounted() {
               await this.$dict.loadType('dept') // 等待部门数据加载到字典
               this.getList()
           },
           methods: {
               async getList() {
                   let res = getUserList({})
                   // 解析并转义字典数据赋值
                   this.list = await res.data.map(item => {
                          let statusRaw = this.$dict.selectDictRaw("status", item.status) // 获取状态对应字典原始对象
                       return {
                           ...item,
                           statusStr: statusRaw.label,
                           statusColor: statusRaw.color,
                           deptName: this.$dict.selectDictLabel("dept", item.deptId) // 翻译字典值
                       }
                   })
                   
               }
           }
       }
   </script>
   <style scoped>
     .item {
         margin-bottom: 20px;
     }
   </style>
   
   
   
   ```

效果展示：

 

更多使用说明查看插件npm主页（https://www.npmjs.com/package/vue-easy-dict）