记录el-date-picker赋值出现异常的BUG

60 阅读1分钟

在开发过程中遇到一个根据选择的选项做一次接口调用,然后接口调用后的两个日期赋值在el-date-picker控件上,正常情况就是

//订单选择
    handleOrderChange(val){
      // 如果订单ID不是数字类型,说明是手动输入的,清空日期
      if(typeof val !== 'number'){
        console.log('handleOrderChange wewqeqwe')
        this.form.launchDate = null
        this.form.boardingPlatformDate = null
        return
      }
      console.log('handleOrderChange this.form123', this.form)
      
      // 根据订单ID获取订单详情
      orderDes(val).then(response => {
        const orderInfo = response.data.orderInfo
        
        if(orderInfo.launchDate !== null){
          this.form.launchDate = orderInfo.launchDate
        }else{
          this.form.launchDate = null
        } 

        if(orderInfo.boardingPlatformDate !== null){
          this.form.boardingPlatformDate = orderInfo.boardingPlatformDate
        }else{
          this.form.boardingPlatformDate = null
        }
        console.log('handleOrderChange this.form456', this.form)
      })
    },

但是控件一直展示不出来,切换别的选项才会展示出来,于是增加this.forceUpdate()刷新,确实可以展示出来了,但是再点击控件选择其他日期就是选不上,以为是日期格式问题,打印日志发现格式也没有问题,求助cursor也没给到解决的方法,最后还是百度使用this.forceUpdate()刷新,确实可以展示出来了,但是再点击控件选择其他日期就是选不上,以为是日期格式问题,打印日志发现格式也没有问题,求助cursor也没给到解决的方法,最后还是百度使用this.set的赋值方法才得以解决,故此记录一下

//订单选择
    handleOrderChange(val){
      // 如果订单ID不是数字类型,说明是手动输入的,清空日期
      if(typeof val !== 'number'){
        console.log('handleOrderChange wewqeqwe')
        this.$set(this.form, 'launchDate', null)
        this.$set(this.form, 'boardingPlatformDate', null)
        return
      }
      console.log('handleOrderChange this.form123', this.form)
      
      // 根据订单ID获取订单详情
      orderDes(val).then(response => {
        const orderInfo = response.data.orderInfo
        
        if(orderInfo.launchDate !== null){
          this.$set(this.form, 'launchDate', orderInfo.launchDate)
        }else{
          this.$set(this.form, 'launchDate', null)
        } 

        if(orderInfo.boardingPlatformDate !== null){
          this.$set(this.form, 'boardingPlatformDate', orderInfo.boardingPlatformDate)
        }else{
          this.$set(this.form, 'boardingPlatformDate', null)
        }
        console.log('handleOrderChange this.form456', this.form)
      })
    },