前端数据字典下拉选项框封装

前端数据字典下拉选项框封装

需求：后端给定一个数据字典的请求接口，前端根据后台返回的dictKey 去请求select下拉框的option数据。

设计思路

1. 将dictKey通过props的方式传给select组件

2. 在组件初始化的时候去请求option数据

3. 将返回的数据渲染到下拉组件的option标签里

   <template>
       <div>
           <el-select v-bind="$attrs" v-on="$listeners">
               <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.itemCode"></el-option>
           </el-select>
       </div>
   </template>
   <script>
   import {getDictData} from '@/utils/dict'
   export default {
       components: {},
       props:{
           dictCode: {
               type: String,
               required: true
           },
       },
       data () {
           return {
               options: []
           }
       },
       created () {
           this.initOption()
       },
       methods: {
          //初始化options
          async initOption () {
              this.options =await getDictData(this.dictCode)
           }
       }
   }
   </script>
   

   到此就完成了一个简单的组件封装，但是这样封装是有问题的。

   问题：

   如果页面有多个一样的组件，就会多次调用相同的接口，造成不必要的浪费。

   怎样避免这样的情况呢？字典管理仓库。

   设计一个字典管理仓库

   1. 给仓库添加属性dict来保存数据字典

   2. 给仓库添加设置字典方法 set

   3. 给仓库添加获取字典方法 get

      //dict.js
      class Dict {
          dict = {};
          set (key, value) {
              this.dict[key] = value;
          }
          get (key) {
              return this.dict[key];
          }
      }
      

   字典仓库使用方式

   1. 查询dic属性中是否有名为dictKey的字典

   2. 如果没有就异步请求接口获取到之后在返回，如果有就直接返回。

      //dict.js
      //获取动态数据字典 
      const getDictData = async (dictName) => {
          if (dict.get(dictName)) {
              return dict.get(dictName);
          }
          const dictData = await getDictDataFromServer(dictName);
          dict.set(dictName, dictData);
          return dictData;
      }
      //获取服务器数据字典
      const getDictDataFromServer = async (dictName) => {
          let dictData = {};
          dictData = await request({ url: 'yourPostUrl', method: 'post', data: { dictCode: dictName } })
          return dictData.data;
      }
      
      

   3. 完整的仓库代码

      //dict.js
      import request from '../utils/request';
      class Dict {
          dict = {};
          set (key, value) {
              this.dict[key] = value;
          }
          get (key) {
              return this.dict[key];
          }
      }
      const dict = new Dict();
      //获取动态数据字典
      const getDictData = async (dictName) => {
          if (dict.get(dictName)) {
              return dict.get(dictName);
          }
          const dictData = await getDictDataFromServer(dictName);
          dict.set(dictName, dictData);
          return dictData;
      }
      //获取服务器数据字典
      const getDictDataFromServer = async (dictName) => {
          let dictData = {};
          dictData = await request({ url: 'yourPostUrl', method: 'post', data: { dictCode: dictName } })
          return dictData.data;
      }
      //重置某项字典
      const resetDict = (dictName) => {
          dict.set(dictName, null);
      }
      export { getDictData, resetDict };
      

到此一个功能完整的数据字段下拉选择框封装完成。

但新的需求又来了：当数据字典数据量特别大时，为了避免在渲染时页面卡顿，需要对数据分片，并实现滚动加载。