date-picker组件置空失败问题

痛定思痛。 2023-09-26 11:33 36阅读 0赞

## 1.问题描述 ##

![30fc5c22e9a1476388a25e3b5e5fffa0.png][]![a41edfdf1e6d40de9518f228bd548607.png][]

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

实现方案：

*  给就诊开始日期（`@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的数据。  
![fc25b1ac24d64b43b73e8db80ded0089.png][]![7c01f1fe06f4436a9fa2373e7411af99.png][]

## 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**][Vue_dom_ _ Vue_nextTick]

[30fc5c22e9a1476388a25e3b5e5fffa0.png]: https://img-blog.csdnimg.cn/30fc5c22e9a1476388a25e3b5e5fffa0.png
[a41edfdf1e6d40de9518f228bd548607.png]: https://img-blog.csdnimg.cn/a41edfdf1e6d40de9518f228bd548607.png
[fc25b1ac24d64b43b73e8db80ded0089.png]: https://img-blog.csdnimg.cn/fc25b1ac24d64b43b73e8db80ded0089.png
[7c01f1fe06f4436a9fa2373e7411af99.png]: https://img-blog.csdnimg.cn/7c01f1fe06f4436a9fa2373e7411af99.png
[Vue_dom_ _ Vue_nextTick]: https://www.cnblogs.com/xjy20170907/p/11858779.html