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如何获取配置代理文件中的api地址值

    vue如何获取配置代理文件中的api地址值

    这篇文章主要介绍了vue如何获取配置代理文件中的api地址值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3不同语法格式对比的实例代码

    vue3不同语法格式对比的实例代码

    vue3发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,这篇文章主要给大家介绍了关于vue3不同语法格式对比的相关资料,需要的朋友可以参考下
    2021-08-08
  • 详解如何在vue中封装axios请求并集中管理

    详解如何在vue中封装axios请求并集中管理

    这篇文章主要为大家详细介绍了如何在vue中封装axios请求并集中管理,w文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下
    2023-10-10
  • vue处理一千张图片进行分页加载思路详解

    vue处理一千张图片进行分页加载思路详解

    开发过程中,如果后端一次性返回你1000多条图片或数据,那我们前端应该怎么用什么思路去更好的渲染呢?这篇文章主要介绍了vue处理一千张图片进行分页加载,需要的朋友可以参考下
    2023-02-02
  • Vue 实现前端权限控制的示例代码

    Vue 实现前端权限控制的示例代码

    这篇文章主要介绍了Vue 实现前端权限控制的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Vue2中使用自定义指令实现el-table虚拟列表的代码示例

    Vue2中使用自定义指令实现el-table虚拟列表的代码示例

    在实际开发中,我们可能会面临其他需求,例如在 el-table 中无法使用分页技术的情况下展示海量数据,这种情况下,页面可能会出现卡顿,严重时甚至可能引发浏览器崩溃,所以针对这个问题本文给大家介绍了vue2中使用自定义指令实现el-table虚拟列表,需要的朋友可以参考下
    2025-01-01
  • 使用Vue3实现列表虚拟滚动的详细步骤

    使用Vue3实现列表虚拟滚动的详细步骤

    在前端开发中,列表的虚拟滚动是一种常见的优化手段,可以大大提升页面性能,在Vue3中,我们可以通过一些技巧来实现列表的虚拟滚动,本文将介绍如何使用Vue3实现列表的虚拟滚动,让你的页面加载更快、更流畅,需要的朋友可以参考下
    2024-09-09
  • vue 子组件向父组件传值方法

    vue 子组件向父组件传值方法

    下面小编就为大家分享一篇vue 子组件向父组件传值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 详解Vue组件之间的数据通信实例

    详解Vue组件之间的数据通信实例

    本篇文章主要介绍了详解Vue组件之间的数据通信实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue.js利用Object.defineProperty实现双向绑定

    vue.js利用Object.defineProperty实现双向绑定

    这篇文章主要为大家详细介绍了vue.js利用Object.defineProperty实现双向绑定,帮大家解析神秘的Object.defineProperty方法
    2017-03-03

最新评论