下拉框根据字典表匹配数据

小半 • 2023年1月18日下午6:33 • 技术随笔 • 阅读 361

前言

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

实现思路

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

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

通过传不同参数返回的数据（以下示例 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));
      }
    });
  },
},

其它页面中用到时：

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

<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>