date-picker组件置空失败问题

Posted 2022-10-28 364.99°

1.问题描述

需求如下：就诊开始日期不能晚于就诊结束日期，就诊结束日期不能早于就诊开始日期。

实现方案：

• 给就诊开始日期（@change="begnChange"）和结束日期（@change="endChange"）分别绑定了两个方法

• 两个方法

      begnChange(value) 
        const endTime = this.form.getFieldValue('endTime')
        if (endTime !== undefined) 
          if (value > endTime) 
            this.$message.error('开始日期不能晚于结束日期')
            this.form.setFieldsValue(
              begnTime: '',
            )
          
        
      ,
      endChange(value) 
        debugger
        const begnTime = this.form.getFieldValue('begnTime')
        if (begnTime !== undefined) 
          if (value < begnTime) 
            this.$message.error('结束日期不能早于开始日期')
            this.form.setFieldsValue(
               endTime: '',
            )
          
        
      ,
  

问题：页面完成判断之后只会给出error信息，而不会置空data-picker的数据。

2.解决方案

使用$nextTick

• 将回调延迟到下次 DOM 更新循环之后执行
• 在修改数据之后立即使用它，然后等待 DOM 更新

    begnChange(value) 
      const endTime = this.form.getFieldValue('endTime')
      if (endTime !== undefined) 
        if (value > endTime) 
          this.$message.error('开始日期不能晚于结束日期')
          this.$nextTick(()=>
            this.form.setFieldsValue(
              begnTime: '',
            )
          )
        
      
    ,
    endChange(value) 
      debugger
      const begnTime = this.form.getFieldValue('begnTime')
      if (begnTime !== undefined) 
        if (value < begnTime) 
          this.$message.error('结束日期不能早于结束日期')
          this.$nextTick(function ()
            this.form.setFieldsValue(
              endTime: '',
            )
          )
        
      
    ,

Vue的dom更新机制 & Vue的nextTick