Vue使用Element的级联选择器Cascader清空事件

最新推荐文章于 2025-06-12 10:28:30 发布

coldriversnow

最新推荐文章于 2025-06-12 10:28:30 发布

阅读量2.4k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/coldriversnow/article/details/137232487

本文介绍了如何在Vue应用中使用el-cascader组件实现级联选择器的清空功能，并在用户点击清除图标时触发自定义方法。开发者需为组件添加ref属性，并在change事件中监听checkedValue长度判断是否清空操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <el-cascader ref="sspajcx"
                           :options="treeselect"
                           clearable
                           v-model="liandong"
                           :props="optionProps"              
                           @change="bmxlChange"></el-cascader>

1、首先添加一个 ref="cascaderHandle" 和clearable

2、在要清空的函数方法中this.$refs.sspajcx.checkedValue=""即可，这个clear是清空按钮绑定的方法

   bmxlChange(value) {
           this.$refs.sspajcx.checkedValue=''
        },

3、如何在点击级联选择器本身的那个×后，调用某个方法（或进行某个步骤）
在级联选择器@change绑定的方法中设置监听，即
if (this.$refs.sspajcx.checkedValue.length === 0)
这个就是监听有没有点击级联选择器的清空那个图标

   bmxlChange(value) {
            let that=this;
            if (this.$refs.sspajcx.checkedValue.length === 0){             
              console.log("清空")
            }else{
                console.log("正常")     
            }
        },