首页 > 其他分享 >解决el-date-picker组件当日历面板展开时点击清空图标无法清空问题

解决el-date-picker组件当日历面板展开时点击清空图标无法清空问题

时间:2023-01-10 17:01:22浏览次数:62  
标签:picker el 日历 value 清空 组件 面板 图标

问题现象:

支持选择多个时间的日期组件,在日历面板展开时点击清空图标是无法清空的

 

 

解决方案:

查找资料发现可以通过change事件来监听清空操作,当监听到value值为null时,说明在做清空操作,这时就能通过直接将绑定的数据值清空来达到清空的效果,不过直接进行数据赋值为空时,页面仍然会显示数据,后面使用了$nextTick,终于解决了问题。

代码示例:

html:

    <el-date-picker
      type="dates"
      v-model="value"
      placeholder="选择一个或多个日期"
      @change="clearChange"
      >
    </el-date-picker>

data里:

  data() {
  return {
   value: ''
    }
  },

menthods:

  methods: {
    clearChange(value) {
      if (!value) {
        this.$nextTick(() => {
          this.value = ''
        })
      }

    }
  }

成功解决!!

参考资料

标签:picker,el,日历,value,清空,组件,面板,图标
From: https://www.cnblogs.com/applesky/p/17040776.html

相关文章

  • kube-flannel.yml
    ---kind:NamespaceapiVersion:v1metadata:name:kube-flannellabels:pod-security.kubernetes.io/enforce:privileged---kind:ClusterRoleapiVersion:rbac.au......
  • SequentialAnimation 和 ParallelAnimation 动画容器
    SequentialAnimation中定义的动画是一个接一个地运行的,以下示例按顺序运行两个数字动画。的矩形动画到 x 的50位,然后到达 y 50的位置。importQtQuick2.0Rectangl......
  • Jekyll + GitHub Pages + Vercel纯免费搭建独立博客
    大家一定不要随便立flag10月份发了个朋友圈,有好兄弟留言说写个教程,我说好然后一忙起来就忘了,昨天好兄弟追到知识星球,在一个新flag帖子下催更了写个无废话极简VSCode......
  • Microsoft 365 开发:如何通过Powershell命令更换OneDrive Owner
    Blog链接:https://blog.51cto.com/13969817一般情况下,企业员工离职,作为IT,我们通常会在第一时间内清除离职员工账号,同时也会将离职员工的Mailbox或者OneDrive授权给接任的人,......
  • electron与react直接通讯
    https://www.electronjs.org/zh/docs/latest/api/ipc-renderer main.jsmainWindow.webContents.on('did-finish-load',()=>{console.log(128888888,process.a......
  • 纯前端table表格导出excel文件,两种方法
    先介绍第一种,因为第一种是直接获取dom节点的数据,可以直接快照形式捕获数据(比如获取过滤后或者格式化后的数据)注意:依赖的版本,太高的话会报undefinedimportFileSaverfr......
  • Stage3D之Hello Triangle
    ​​http://www.adobe.com/devnet/flashplayer/articles/hello-triangle.html​​RequirementsPrerequisiteknowledgeFamiliarityworkingwiththeStage3DAPIand......
  • Flashdevelop解决ANE报Not supported native extensions profile
    ​ 报 Not supported native extensions profile  解决办法: 修改application.xml文件原<​​​​supportedProfiles​​​​>desktopextende......
  • Pixel Bender 浅尝
    ​ AdobePixelBender是一种编程语言,用于创建或操作图像内容。您可以使用PixelBender创建一个内核(在本文档中亦称之为着色器)。着色器定义了一个可对图像的每个像素单......
  • vue3项目开源项目运行报错::v-deep usage as a combinator has been deprecated. Use
    今天找了一个vue3.0开源项目,在运行的时候npmi报错使用了npmi--legacy-peer-deps根据以上安装依赖成功在运行的时候有报错::v-deepusageasacombinatorhasbeend......