vue重置el-date-picker不清空
时间: 2025-04-29 16:52:55 浏览: 27
### Vue Element UI `el-date-picker` 组件重置表单不清空日期解决方案
当使用Element UI中的`el-date-picker`组件时,如果遇到重置表单无法清除已选日期的情况,可以通过监听特定事件并手动设置绑定的数据模型来实现清空操作。
对于`el-date-picker`组件而言,并不存在专门用于处理清除逻辑的回调函数[^2]。因此,在实际开发过程中,通常会利用`input`或`change`事件来进行相应控制。具体来说:
- 可以为表单添加一个自定义方法用于执行重置动作;
- 在该方法内部不仅调用框架自带的resetFields()接口,还需额外针对日期选择器单独设定其v-model对应的变量为空值;
下面是一个具体的例子展示如何做到这一点:
```html
<template>
<div id="app">
<!-- 表单项 -->
<el-form ref="formRef" :model="formData">
<el-form-item label="时间段选择">
开始时间:<el-date-picker v-model="formData.startTime" type="date"></el-date-picker><br/>
结束时间:<el-date-picker v-model="formData.endTime" type="date"></el-date-picker>
</el-form-item>
<!-- 提交按钮 -->
<button @click.prevent="handleReset">重置</button>
</el-form>
</div>
</template>
<script>
export default {
data(){
return{
formData:{
startTime: '',
endTime:''
}
};
},
methods: {
handleReset () {
this.$refs.formRef.resetFields(); // 调用内置重置功能
// 手动将日期字段设为空字符串以确保完全清除显示内容
Object.assign(this.formData, {startTime:'', endTime:''});
console.log('Form has been reset');
}
}
}
</script>
```
通过上述方式可以有效解决因缺少专用清除机制而导致的问题,从而达到预期效果——即点击“重置”后能够正常清理掉之前所填入的信息,包括由`el-date-picker`控件选定的时间范围。
阅读全文
相关推荐


















