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

兜里没糖了~

已于 2022-04-26 17:20:48 修改

阅读量5.2k

点赞数

分类专栏：前端开发文章标签：前端 vue

于 2022-04-25 10:38:43 首次发布

本文链接：https://blog.csdn.net/weixin_46651245/article/details/124398244

版权

前端开发专栏收录该内容

6 篇文章

订阅专栏

本文探讨了前端如何通过按需加载实现数据字典高效利用，以及后端字典在下拉选择、表格显示和逻辑判断中的应用技巧。重点介绍了在前端开发中维护的字典表优化策略和在后端与前端交互中的常见用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(值, '字典名称')" />