一、需求说明

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

如现在有一个数据列表，要显示字段姓名、部门名称、状态文本，而后端的接口只返回了姓名、部门ID，状态值。

后端返回数据格式

[
    {
        name: "张三",
        deptId: 1,
        status: 0
    },
    {
        name: "李四",
        deptId: 2,
        status: 1
    }
]

其中部门名称需要通过部门列表接口获取部门列表数据，再从部门列表中找到与部门ID匹配的部门名称

部门列表数据

[
    {
        id: 1,
        name: "信息部"
    },
    {
        id: 2,
        name: "人力资源部"
    }
]

状态文本需要通过状态结果字典进行翻译。

状态结果字典

[
    {
        label: "启用",
        value: 0
    },
    {
        label: "禁用",
        value: 1
    }
]

二、解决方案

安装字典管理插件
```
npm i vue-easy-dict@1.2.0 --save
```

在项目src文件加内建立字典配置文件（如：src/dict/index.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)
            })
        })
    },
})

在项目main.js中导入字典配置文件

import Vue from 'vue'
import App from './App.vue'
import './dict' // 导入字典配置文件

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

列表页面使用字典

<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>

效果展示：

20221006_效果展示图.png

更多使用说明查看插件npm主页（www.npmjs.com/package/vue…

Vue字典配置_全局字典数据获取、快速转义

一、需求说明

二、解决方案