前端开发中数据字典的应用场景

1.数据字典

字典：字典是一个键值对，主要的特征是一一对应，字典中的 key 是不能重复且无序的，value 可以重复。 key 用于在前后端的传输或者在代码中做逻辑判断，value 用于向用户展示。

2.前端数据字典的最优方案

采用的是按需加载的方式。就是第一次使用一个数据字典就发送请求加载这个数据字典，并将该数据字典放入浏览器本地缓存中。第二次再用到这个字段的时候，就不再发送网络请求，而是从浏览器本地获取数据字典的值。

这种方案能够解决一个问题：一个浏览器用户所需的数据字典只加载一次，而且是按需加载，不需要的不加载。这种分次加载的方式，用户体验也没问题。

3.在后端维护的字典表前端常规使用方法

（1）在下拉选择器中的使用

 <el-form-item label="" prop="值">
       <el-select v-model="params.值" placeholder="" clearable>
            <el-option v-for="(item,i) in getDictOption('字典名称')" :key="i" :value="item.value" :label="item.label" />
       </el-select>
 </el-form-item>

（2）将后端传过来的key转换为value显示（一般在表格中）

  <el-table-column align="center" label="" prop="值" :formatter="({值})=>tableDictFormat(值, '字典名称')" />

（3）逻辑判断