element-ui库的日期时间选择器清空踩坑

在项目中遇到一个日期时间筛选需求,通过开始和结束时间从接口获取数据。然而在使用日期选择器的清空功能后,发现因时间被设置为null导致报错。解决办法是在时间选择器的回调函数中添加判断,当时间为空时将time设置为数组,避免报错。这样可以确保在清空后正确地将time重置为[],从而正常发送请求。
摘要由CSDN通过智能技术生成

今天项目有一个需求是根据时间范围来筛选数据,接口传入开始时间和结束时间即可,原本比较简单的需求,却遇到了一个很奇怪的问题。

由于日期时间选择器中绑定的数据time是数组形式,索引为0的是开始时间,索引为1的是结束时间,因此请求是传入time[0]和time[1]即可,很简单就能实现。

但是在使用日期时间选择器自带的清空功能时就出了问题,按照需求,清空后将参数置空,再发请求,做到再次获取所有数据的效果,但是这一步就直接报错了。

看了一下发现是无法读取null的属性,我就纳了闷了,绑定的time不是数组吗?输出了一下之后发现,自带的清空功能会将time修改为null。然后解决方案也比较简单,因为时间日期选择器的回调函数会返回组件的绑定值,因此直接在时间选择器的@change绑定的回调函数中加一层判断,如果为空,就修改time为[]空数组(在发请求时修改也可),代码如下:

//日期时间选择器回调函数
    timeChange(time) {
      if (!time) {
        //this.time为绑定的数据
        this.time = [];
      }
      console.log(this.time)
    },

然后this.time清除后就会变为[],就不会再报错。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值