关于vue项目查询接口传参的合理控制

项目场景：

如图所示

解释：这是常见的多条件查询业务，一般都是传对应的参数，查对应的列表数据

---

问题描述

后端现在规定：下拉或者输入框里面有值，才把对应对应的字段和值传过来，反之，不要传字段过来！

如图：

先看下原来传参数的代码部分：

1.一开始放到计算属性里面，考虑到共用的时候好处理，也减少了代码，
  要传参的时候直接 this.params_search 即可
2.但是 缺点也是很明显的，这种数据结构已经成型，要完成最开始说的那种要求，
  会在 params_search里面写很多的if判断，非常难受。
  不写又不得行，直接传过去的话，又会有一些后端不要的字段
computed: {
    params_search() {
      return {
        prj_level: this.selectData.value_level,
        prj_name: this.selectData.prj_name,
        prj_city: this.value_area[0] ? this.value_area[0] : "",
        prj_county: this.value_area[1] ? this.value_area[1] : "",
        opportunity_id: this.selectData.opportunity_id,
        page: this.currentPage,
        page_size: this.pagesize,
      };
    },
  },
复制代码

解决方案：

用代码解决代码，魔法打败魔法~

既然不能动 上面的数据结构，那么干脆就照着上面的构造一个新的呗， 就在 查询发请求的时候，造一个后端需要的，再传给他

请求代码：

handleInit() {
      let obj = {}; 定义一个 空对象
      for (const key in this.params_search) {
      获取 原数据里面的 值 即： 表单组件里面的值
        let tem = this.params_search[key];
        稍微判断一下数据类型 主要怕有时候传0和1的情况
        if (typeof tem == "number") {
          obj[key] = tem;
        } else if (typeof tem == "string") {
          if (tem.length > 0) {
            obj[key] = tem;
          }
        }
      }
      // console.log(obj); 可以自己打印出来看一下是不是需要的数据结构
      this.$axios({
        url: "your url",
        method: "POST",
        responseType: "json",
        data: obj,
      })
        .then((data) => {})
    },
复制代码

结语：

写到这，我哭出了声，终究还是太溺爱这个后端了。。。