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

学无止境 lv.1

发布时间：2022-10-09 22:05:42 337

相关标签： # npm# 后端# json# 数据# 信息

一、需求说明

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

如现在有一个数据列表，要显示字段姓名、部门名称、状态文本，而后端的接口只返回了姓名、部门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')

列表页面使用字典

效果展示：

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

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

文章来源： https://blog.51cto.com/u_2690556/5734016

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。