date-picker组件置空失败问题
组件 失败 Date picker 问题
2023-09-11 14:22:32 时间
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: '',
})
})
}
}
},
相关文章
- SpringBoot2 整合OAuth2组件,模拟第三方授权访问
- PHP 独立使用 laravel ORM 数据库组件,PHP ORM数据库模型组件
- 解决ionic 上拉加载组件 ion-infinite-scroll自动调用多次的问题或禁止第一次加载
- uni-app - 城市选择索引列表 / 通过 A-Z 排序的城市列表(uview 组件库 IndexList 索引列表)
- 解决Wireshark安装Npcap组件失败
- 微信 小程序组件 电话
- 微信小程序组件 滚动导航
- Android应用程序组件Content Provider在应用程序之间共享数据的原理分析
- 超级简洁、彻底组件化的轻量级Android Kotlin Jetpack MVVM组件化框架
- 微信小程序开发入门与实战(组件生命周期)
- odoo15 owl 组件实验
- Java Web三大组件