清空el-cascader的所选内容（vue+element ui）

小可爱的博客

于 2019-10-28 12:23:21 发布

阅读量1.1w

点赞数 5

分类专栏： vue 文章标签： vue element ui el-cascader

本文链接：https://blog.youkuaiyun.com/weixin_45298700/article/details/102778920

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Element UI中使用清空方法清除el-cascader组件的已选项，通过设置v-model和调用清空方法实现，同时保持与clearable属性相同的效果。

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

点击清空筛选项按钮清空el-cascader的所选内容

html

 <el-cascader
                style="width:160px;"
                clearable
                emitPath="true"
                v-model="form.goodsClassfiyList"
                :options="classifyTree"
                @change="handleChange"
                :show-all-levels="false"

        ></el-cascader>

   handleChange(value) {
     this.form.goodsClassifyName = value[2];   
   }

清空方法

this.form.goodsClassfiyList =[];
this.form.goodsClassifyName="";

实现的效果和原理与el-cascader标签的clearable相同