背景
当我们在编写前端代码时，往往会对状态类的字段感到苦恼，因为他可能是0，1，2…，也可能是…，我们将他称之为：“字典（dict）”。它是多变的，而且后期可能会有所改动，所以我们不可能把在前端写死。
处理方法其实有很多种，可以让后端来处理，返回时进行翻译，这可能降低了灵活性，我们也可以前端处理，下面我们来讲解一下前端的一种处理方法。

原理：全局使用Vue的混入（mixin），来实现页面创建时进行请求后端字典列表，然后在页面通过该列表进行翻译字典。

1. 创建 Dict 类

首先创建一个 dict 文件夹，再在这个文件夹下创建 Dict.js，如下

import Vue from 'vue'
import request from '@/utils/request';export default class Dict {constructor() {this.type = {}}async init(options) {// options 是页面定义的 dicts 列表，表明要请求哪些类型的字典for (let type of options) {// 使用 Vue.set 方法来初始化指定类型列表，否则页面将获取不到Vue.set(this.type, option, [])// 这里是请求后端的字典接口const res = await request({url: `localhost:8080/getDictList?type=${type}`,method: 'get'});const data = res.data;// 将请求后的字典添加到指定 type 列表this.type[type].splice(0, Number.MAX_SAFE_INTEGER, ...data);}}
}

2. 创建全局混入

创建 dictMixin.js 文件，如下

import Dict from "./Dict";export default function (Vue, options) {Vue.mixin({data() {// 如果页面没有设置 dicts 属性，则不创建 dict 属性if (this.$options === undefined || this.$options.dicts === undefined || this.$options.dicts === null) {return {}}const dict = new Dict();return {dict}},methods: {// 翻译字典（根据字典列表和字典值，获取指定字典描述）formatDict(dicts, value) {const dictData = this.getEnumsInfo(dicts, value);if (dictData) {return dictData.label || "";}return "";},// 获取字典数据（根据字典列表和字典值，获取指定字典数据）getDictInfo(dicts, value) {const dictDatas = dicts.filter(item => item.value === value);if (dictDatas && dictDatas.length > 0) {return dictDatas[0];}return null;}},async created() {// 如果 dict 不是 Dict 类型则请求字典if (!(this.dict instanceof Dict)) {return;}// 请求字典接口await this.dict.init(this.$options.dicts);}})
}

3. 创建字典入口

在 dict 文件夹下创建index.js，如下

import dictMixin from "./dictMixin";function install() {Vue.use(dictMixin)
}export default {install
}

4. 安装字典

将 index.js 引入 main.js 然后使用 install 方法安装字典，如下

import dictMixin from "@/dict";
dictMixin.install();

5. 使用

在页面添加 dicts 属性，

export default {name: "VueView",dicts: ['status'], // 字典数组，可多个data() {},methods: {},created() {}
}

然后页面就可以这样使用

1. 表格列翻译字典值

<el-table-column label="状态" align="center" prop="status"><template scope="scope">{{ formatDict(dict.type.status, scope.row.status) }}</template>
</el-table-column>

2. 多选组件

<el-select v-model="form.status" placeholder="请选择状态" clearable size="small"><el-optionv-for="d in dict.type.status":key="d.value":label="d.label":value="d.value"/>
</el-select>

或

<el-radio-group v-model="form.status"><el-radiov-for="d in dict.type.status":label="d.value":key="d.value">{{ enu.label }}</el-radio>
</el-radio-group>