所谓数据字典,其实就是维护数据类型的数据,比如用户性别是男、女、中性,而后端需要用0、1、2 来存储性别,如果不使用数据字典那么每次读取到用户性别1 就需要在后台做一个判断if(sex==1){sex="男"},然后在传给前端页面去显示,甚至需要后端传到前段后前端去判断。
麻烦!如果使用数据字典则可以避免这一问题,后端传给前端的数据就是0、1、2 ,在平台数据字典中添加好用户性别字典并添加上性别的数据,男对应1,女对应2,用到的时候只需要先加载数据字典,将加载到的数据存储到数组中,等到需要展示相应的字段信息在前端时只需要:对应字典中的数据翻译对应的值。
其实这种思想就类似于后端经常用到的封装,将所有的可能性封装到一个对象中,当需要判断某一个字段本身是0/1/2...它的对应值时就可以调用这个对象然后传参判断。
字典管理是用来维护数据类型的数据,如下拉框、单选按钮、复选框、树选择的数据,方便系统管理员维护。主要功能包括:字典分类管理、字典数据管理。
大于3.7.0
版本使用如下方法:
1、main.js中引入全局变量和方法(已有)
import DictData from '@/components/DictData'
DictData.install()
2、加载数据字典,可以是多个。
export default {
dicts: ['字典类型'],
...
...
3、读取数据字典
<el-option
v-for="dict in dict.type.字典类型"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
4、翻译数据字典
// 字典标签组件翻译
<el-table-column label="名称" align="center" prop="name">
<template slot-scope="scope">
<dict-tag :options="dict.type.字典类型" :value="scope.row.name"/>
</template>
</el-table-column>
// 自定义方法翻译
{{ xxxxFormat(form) }}
xxxxFormat(row, column) {
return this.selectDictLabel(this.dict.type.字典类型, row.name);
},
小于3.7.0
版本使用如下方法:
1、main.js中引入全局变量和方法(已有)
import { getDicts } from "@/api/system/dict/data";
Vue.prototype.getDicts = getDicts
2、加载数据字典
export default {
data() {
return {
xxxxxOptions: [],
.....
...
created() {
this.getDicts("字典类型").then(response => {
this.xxxxxOptions = response.data;
});
},
3、读取数据字典
<el-option
v-for="dict in xxxxxOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
4、翻译数据字典
// 字典标签组件翻译
<el-table-column label="名称" align="center" prop="name">
<template slot-scope="scope">
<dict-tag :options="xxxxxOptions" :value="scope.row.name"/>
</template>
</el-table-column>
// 自定义方法翻译
{{ xxxxFormat(form) }}
xxxxFormat(row, column) {
return this.selectDictLabel(this.xxxxxOptions, row.name);
},
最后只需要在平台的系统管理-字典管理添加上对应的数据字典就可以使用了。