若依框架数据字典的使用

所谓数据字典，其实就是维护数据类型的数据，比如用户性别是男、女、中性，而后端需要用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);
},

最后只需要在平台的系统管理-字典管理添加上对应的数据字典就可以使用了。