Vue使用Element的级联选择器Cascader,在方法中清空选项

最近使用vue写项目,用到的是ELement的框架,项目中有个地方用到了级联选择器,好多东西直接在官网都找不到。

一、我要实现点击清空以后,去调用一个和点击下拉选项不一样方法,做这个功能的时候,也找到了如何在方法中清空级联选择器的选项。

官网上只说明了想要清空级联选择器只需要添加一个clearable
在这里插入图片描述
原理就是在级联选择器上面绑定一个监听
1、首先添加一个 ref="cascaderHandle"clearable
在这里插入图片描述
2、在要清空的函数方法中this.$refs.cascaderHandle.checkedValue=""即可,这个clear是清空按钮绑定的方法
在这里插入图片描述
3、如何在点击级联选择器本身的那个×后,调用某个方法(或进行某个步骤)
在级联选择器@change绑定的方法中设置监听,即
if (this.$refs.cascaderHandle1.checkedValue.length === 0)
这个就是监听有没有点击级联选择器的清空那个图标
在这里插入图片描述
在这里插入图片描述

二、关于清空级联选择器的选项,还有一种方法,定义一个变量

在这里插入图片描述
在这里插入图片描述
当需要清空选项的时候,直接this.cascaderCheck=[]即可
在这里插入图片描述

  • 16
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值