element的form查询时过滤多余的数据

尼克_张

已于 2022-11-10 15:15:34 修改

阅读量648

点赞数

分类专栏： element 文章标签： vue.js 前端 javascript

于 2022-05-09 15:54:25 首次发布

本文链接：https://blog.csdn.net/m0_48076809/article/details/124666662

版权

element 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

👨🏻‍🎓博主介绍：大家好，我是尼克.张，热爱分享知识，很高兴在这里认识大家🌟
🌈擅长领域：前端开发
🙏🏻如果本文章各位小伙伴们有帮助的话，🍭关注+👍🏻点赞+🗣评论+📦收藏，相应的有空了我也会回访，互助！！！
🤝另本人水平有限，旨在创作简单易懂的文章，在文章描述时如有错，恳请各位大佬指正，在此感谢！！！

项目中经常有查询数据的功能，根据fom表单的内容进行查询，但是在后端有时不要传某些数据，或者不传空数据时，需要对传过去的参数进行过滤。特别当在有时间范围的情况下，需要处理开始和结束时间，因为时间范围控件返回的是一个数组，所以对应取值即可。然后再删除time这个数据，为了不影响form中的time，所以一开始需要对最新的form进行深拷贝一份。最后则使用filterParmas这个方法去除为空的值。

<el-form ref="form" :model="form" label-width="80px" inline>
	<!--...其他的el-form-item-->
  <el-form-item label="时间">
    <el-date-picker
      v-model="date"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd HH:mm:ss"
    >
    </el-date-picker>
  </el-form-item>
  <el-button round @click="getList">查询</el-button>
</el-form>

data() {
  return {
    form: {
      id: "",
      time:[],
      type: 0,
    },
  };
},
watch: {
  form: {
    handler(val) {
      let data = {
        beginTime: val.time?.[0],
        endTime: val.time?.[1],
        ...val,
      };
      data = this.$filterParams(data);
      delete data.time;
      this.finalParams = data;
      console.log(this.finalParams);
    },
    deep: true,
    immediate: true,
  },
},

当触发getList方法时，this.finalParams就是最终传给后端的参数

export function filterParams(obj) {
  for (let key in obj) {
    let falseValue = [undefined, null, ""]
    if (falseValue.includes(obj[key])) {
      delete obj[key]
    }
  }
  return obj
}