el-date-picker时间清空值为null处理方案

 更新时间:2024年08月12日 10:01:01   作者:lixh_man  
本文介绍关于Vue.js项目中时间选择器组件的问题,当选择后清空导致值变为null,进而引发后台接口报错,通过监听`overallForm.time`的值并设置为空数组,成功解决此问题,确保了数据正确性,同时,建议避免直接监听整个对象以优化性能,感兴趣的朋友一起看看吧

element 时间选择器处理选择值 当项目有时间选择器有查询条件定义数据为数组值,初始化值为空,当选择后值为一个数组,里面有两个值,再次清空时,值将变为null,传入后台将报错,采用watch监听处理这块bug!

elementui的时间选择器

项目中的一些代码

<el-col :span="10">
          <el-form-item label="日期">
            <el-date-picker
              v-model="overallForm.time"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              align="right"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        定义的data
 data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      overallForm: {
        time: [],
      },
    }
  },
  methods:{
    check(){
      let params = {
             startTime:  this.overallForm.time[0] ,
             endTime:  this.overallForm.time[1] ,
             limit: this.page.pageSize,
             page: this.page.pageNo,
          };
        //请求axios
        *************************
       } 
  }

这样在发送接口时会暴露出一些问题。就如上文中提到选择数据后清空后值不在是array而是null,这样使用watch监听 watch不要直接监听整个对象,直接监听精准值,避免不必要的性能浪费

  watch: {
    "overallForm.time"(newVal) {
      if (newVal == null) {
        this.overallForm.time = [];
      }
    },
  },

这样中间暴露的一些弊端就解决了

到此这篇关于el-date-picker时间清空值为null处理的文章就介绍到这了,更多相关el-date-picker null值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3.2 新增指令 v-memo 用法详解(提高性能利器)

    Vue3.2 新增指令 v-memo 用法详解(提高性能利器)

    v-memo 接受一个依赖的数组,依赖的数组变化,v-memo 所对应的 DOM 包括子集将会重新渲染,这篇文章主要介绍了Vue3.2 新增指令 v-memo 用法,提高性能的又一利器,需要的朋友可以参考下
    2022-09-09
  • uniapp-ios开发之App端与webview端相互通信的方法以及注意事项

    uniapp-ios开发之App端与webview端相互通信的方法以及注意事项

    在uni-app与Webview之间进行数据交互是非常常见的需求,下面这篇文章主要给大家介绍了关于uniapp-ios开发之App端与webview端相互通信的方法以及注意事项的相关资料,需要的朋友可以参考下
    2024-07-07
  • 从vue-router看前端路由的两种实现

    从vue-router看前端路由的两种实现

    本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由,介绍了相关原理,并对比了两种方式的优缺点与注意事项。最后分析了如何实现可以直接从文件系统加载而不借助后端服务器的Vue单页应用。
    2021-05-05
  • vue项目使用js监听浏览器关闭、刷新及后退事件的方法

    vue项目使用js监听浏览器关闭、刷新及后退事件的方法

    这篇文章主要给大家介绍了关于vue项目使用js监听浏览器关闭、刷新及后退事件的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue Mint UI mt-swipe的使用方式

    Vue Mint UI mt-swipe的使用方式

    这篇文章主要介绍了Vue Mint UI mt-swipe的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue使用VueUse构建一个支持暂停/重置的CountUp组件

    Vue使用VueUse构建一个支持暂停/重置的CountUp组件

    本文介绍了如何利用 VueUse 的 useRafFn 从零构建一个功能更强大的 CountUp 组件,它不仅支持 vue-countup-v3 的全部特性,还额外提供了 pause、resume、reset 等命令式控制方法,感兴趣的小伙伴可以了解下
    2026-04-04
  • vue中使用vant的Toast轻提示报错的解决

    vue中使用vant的Toast轻提示报错的解决

    这篇文章主要介绍了vue中使用vant的Toast轻提示报错的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Axios代理配置及封装响应拦截处理方式

    Axios代理配置及封装响应拦截处理方式

    这篇文章主要介绍了Axios代理配置及封装响应拦截处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题

    解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题

    这篇文章主要为大家介绍了解决el-cascader在IE11浏览器中加载页面自动展开下拉框问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 7个很棒的Vue开发技巧分享

    7个很棒的Vue开发技巧分享

    这篇文章主要为大家整理了7个很棒的Vue开发技巧,可以帮助大家更好的理解和使用vue框架。文中的示例代码讲解详细,感兴趣的可以了解一下
    2023-02-02

最新评论