vue中el-date-picker type=daterange日期清空时不回显的解决

更新时间：2023年07月18日 10:21:55 作者：qiuqiu1894

这篇文章主要介绍了vue中el-date-picker type=daterange日期清空时不回显的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue中el-date-picker type=daterange日期清空时不回显

             <div class="search-brank">
                <label style="cursor:pointer;"  @click="search"><i class="icon-date"></i></label>
                <el-date-picker
                 :editable='false'
                    v-model="datetime"
                    type="daterange"
                    unlink-panels
                    class="datePickers" start-placeholder="开始日   期" end-placeholder="结束日期" 
                    @change="handleDate"
                    :picker-options="pickerOptions0" clearable>
                </el-date-picker>
            </div>

赋值函数：

            handleDate(){
                if(this.datetime[0]!=null){
                     this.starttime=this.formDate(this.datetime[0]);
                    this.endtime=this.formDate(this.datetime[1]);
                }else{
                     this.starttime='';
                     this.endtime='';
                }
            },

问题：当控件清空或修改时，@change=“handleDate”不会触发，datetime并不会实时更新。并且实际上，如果清空了datetime是null，并没有this.datetime[0]=null，this.datetime[1]=null的说法。

解决：使用@input=“immediUpdate”。

<div class="search-brank">
                <label style="cursor:pointer;"  @click="search"><i class="icon-date"></i></label>
                <el-date-picker
                 :editable='false'
                    v-model="datetime"
                    type="daterange"
                    unlink-panels
                     class="datePickers" start-placeholder="开始日   期" end-placeholder="结束日期" 
                    @input="immediUpdate"
                    :picker-options="pickerOptions0" clearable>
                </el-date-picker>
             </div>

            immediUpdate(e) {
                this.$nextTick(() => {
                    if(e==null){
                        this.starttime='';
                        this.endtime='';
                    }else{
                        this.$set(this,"datetime", [e[0], e[1]]);
                        this.starttime=this.formDate(this.datetime[0]);
                        this.endtime=this.formDate(this.datetime[1]);                        
                    }
                });
            },

vue element-ui el-date-picker日期选择器清空按钮的坑

watch监听选择器点击清空按钮时会报错

在这里插入图片描述

这是因为Element-ui中没有内置清除按钮的回调函数, 当点击清除按钮的时候，value会被设置为null。

解决方法

在下次调用之前，为value重新赋值，错误解决，

      if (!newData) {
	        newData = []
	      }

然后在为value重新赋值前把开始日期和结束日期绑定的值置为空，就成功清除了：

watch: {
	    time_value(newData) {
	      if (!newData) {
	        newData = []
	       this.startCreateTime = '' //开始日期
	     this.endCreateTime = '' //结束日期
	      }
	      //日期格式转换
	      this.startCreateTime = this.$moment(newData[0]).format(
	        'YYYY-MM-DD HH:mm:ss'
	      )
	      this.endCreateTime = this.$moment(newData[1]).format(
	        'YYYY-MM-DD HH:mm:ss'
	      )
	      this.current = 1
	      this.initData()
	    },
 },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue-cli中实现响应式布局的方法
这篇文章主要介绍了vue-cli中实现响应式布局的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
vue 中的 v-model详解
文章介绍了Vue中的v-model实现原理,包括数据监听和UI通知,通过绑定props.modelValue和使用update:modelValue,子组件可以实现数据变更通知父组件,Vue3提供了defineModel来简化v-model的定义,并支持自定义v-model变量名,感兴趣的朋友一起看看吧
2025-01-01
elementui 开始结束时间可以选择同一天不同时间段的实现代码
这篇文章主要介绍了elementui 开始结束时间可以选择同一天不同时间段的实现代码,需要先在main.js中导入相应代码,代码简单易懂,需要的朋友可以参考下
2024-02-02
Vue使用driver.js做引导页
Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库，本文主要介绍了Vue使用driver.js做引导页，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
Vue如何实现验证码输入交互
这篇文章主要介绍了Vue实现验证码输入交互的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-12-12
vue中使用protobuf的过程记录
由于目前公司采用了ProtoBuf做前后端数据交互，进公司以来一直用的是公司大神写好的基础库，完全不了解底层是如何解析的。下面小编给大家分享vue中使用protobuf的过程记录，需要的朋友参考下吧
2018-10-10
Vue 自定义指令详解
本文介绍了如何在Vue中定义和使用自定义指令,包括指令的注册、钩子函数、参数以及常见指令的封装,如v-copy、v-longpress等,自定义指令在处理某些底层DOM操作时非常便捷,感兴趣的朋友一起看看吧
2025-01-01
Element el-tag标签图文实例详解
现在好多应用场景里会有一些需要给文章打标签等类似的操作,下面这篇文章主要给大家介绍了关于Element el-tag标签的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
使用Vue.observable()进行状态管理的实例代码详解
这篇文章主要介绍了使用Vue.observable()进行状态管理的实例代码，本文通过代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
详解VSCode配置启动Vue项目
这篇文章主要介绍了VSCode配置启动Vue项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05