今天在做日期筛选功能的时候，用到了Ant Design Vue 中的DatePicker日期组件，筛选中有一个重置筛选条件的按钮，需要能控制清空日期组件，虽然日期组件有自带的清除按钮，但是官方文档并没有介绍如何控制清除，后来上网找到了解决方案，就记录一下。
一、效果图
1613911587862.gif
二、代码示例
1.组件使用value属性绑定值
<a-range-picker
@change="filterTime"
:value="showDateTime"
>
<a-icon slot="suffixIcon" type="calendar" />
</a-range-picker>
2.属性定义
data() {
return {
showDateTime:null, //默认给个null
...
}
}
3.change事件定义
methods: {
//当日期组件值改变的时候，会触发该方法
filterTime(moment) {
//把moment设置给this.showDateTime，保证正常显示所选的日期
this.showDateTime = moment;
},
...
}
4.使用null设置value来清空值（假如有需要重置的场景）
this.showDateTime = null;
网友评论