快速匹配字典表数据，下拉框也能变得更加智能

前言

下拉框对于前端来说最熟悉不过了吧，大部分情况下都是前台写死，偶尔字段较多时也会通过接口返回；但如果字段比较多且项目中有多个地方用到，这种情况下，后台一般会让我们通过传不同的参数查询字典表匹配对应数据，下面一起来看看吧。

---

实现思路

在一个页面中将字典表所有的类型依次调用接口方法并将类型传参，在接口方法中通过判断不同的类型使其返回不同的数据，然后将其保存，其它页面中若用到匹配的下拉框直接获取保存的数据渲染即可。下面一起来看看实例中的代码操作。

---

字典表中未处理的数据，所有类型的数据混杂在一起，如下图：

---

通过传不同参数返回的数据（以下示例 name 值为 pfjd_type 时），如下图：

---

实现过程

我们尽可能选择首页或者登录后进入的页面去请求接口，然后通过传不同的参数将其对应返回的数据存储在浏览器中。

mounted 方法中

car_type、pfjd_type、cpys_type 就是我们需要传递的参数。

mounted() {
  this.findByName("car_type");
  this.findByName("pfjd_type"); 
  this.findByName("cpys_type");
},

methods 方法中

在 methods 方法中调用接口传参，拿到不同参数返回的数据将其存储。

methods: {
  findByName(value) {
    console.log(value);
    findByName(this.$qs.stringify({ name: value })).then((res) => {
      if ("car_type" == value) {
        sessionStorage.setItem("carTypeList", JSON.stringify(res.data));
      }
      if ("pfjd_type" == value) {
        sessionStorage.setItem("pfjdTypeList", JSON.stringify(res.data));
      }
      if ("cpys_type" == value) {
        sessionStorage.setItem("cpysTypeList", JSON.stringify(res.data));
      }
    });
  },
},

或者

mounted() {
  const dataMappings = [
    { name: "car_type", storageKey: "carTypeList" },
    { name: "pfjd_type", storageKey: "pfjdTypeList" },
    { name: "cpys_type", storageKey: "cpysTypeList" },
  ];
  this.findAndStore(dataMappings);
},
methods: {
  findAndStore(dataMappings) {
    dataMappings.forEach(({ name, storageKey }) => {
      console.log(name);
      findByName(this.$qs.stringify({ name })).then((res) => {
        sessionStorage.setItem(storageKey, JSON.stringify(res.data));
      });
    });
  },
},

其它页面中用到时：

根据需要拿取存储在浏览器中的数据即可。

<template>
  <div>
    <el-select v-model="dischargeStage" placeholder="请选择" clearable>
      <el-option v-for="item in optionsPfjd" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dischargeStage: "",
      optionsPfjd: [],
    };
  },
  mounted() {
    this.optionsPfjd = JSON.parse(sessionStorage.getItem("pfjdTypeList")); //之前筛选保存过的数据
  },
  methods: {},
};
</script>

---

当然，如果你对微信小程序中的数据匹配感兴趣，也可以参考博主的另一篇文章 微信小程序通过字典表匹配对应数据