[JavaScript知识库] element的form查询时过滤多余的数据

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> element的form查询时过滤多余的数据 -> 正文阅读

[JavaScript知识库]element的form查询时过滤多余的数据

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

项目中经常有查询数据的功能，根据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.finalForm = data;
      console.log(this.finalForm);
    },
    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
}