vue el-cascader组件change失效以及下拉框不消失的问题

最新推荐文章于 2025-05-23 21:30:00 发布

原创最新推荐文章于 2025-05-23 21:30:00 发布 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

vue 专栏收录该内容

28 篇文章

订阅专栏

文章目录

1.前言

最近项目上用到el-cascader这个组件,需要可以选第一级菜单，也需要可以选第二级菜单，点击完成之后需要关闭下拉框。其实功能比较简单，找了很多资料，没有找到合适的方案，下面还是自己想了个方案才解决问题

2. 碰到的问题

1.如何让下拉框消失？
2.change方法只是值发生改变才会触发，如果是同一个值就不会触发这个方法,我看有些人还去改源码?

3. 如何解决这两个问题

首先需要change方法

    //关闭联级面板
    cascaderChange() {
      //监听值发生变化就关闭它
      this.$refs.cascaderLocation.dropDownVisible = false;
      this.$refs.cascaderType.dropDownVisible = false;
    },

然后还需要visible-change这个方法，当下拉框出现值为true，下拉框消失值为false

//地点
<el-cascader
  v-model="formSearch.location"
  :show-all-levels="false"
  :options="locations"
  :props="{ checkStrictly: true, expandTrigger: 'hover' }"
  ref="cascaderLocation"
  @change="cascaderChange"
  clearable
  style="width:210px;"
  @visible-change="value => cascaderVisibleChange(value, 'location')"
></el-cascader>

//算法类型
<el-cascader
  v-model="formSearch.type"
  :show-all-levels="false"
  :options="algorithms"
  :props="{ checkStrictly: true, expandTrigger: 'hover' }"
  style="width:130px;"
  ref="cascaderType"
  @change="cascaderChange"
  @visible-change="value => cascaderVisibleChange(value, 'type')"
></el-cascader>

项目里面用了两种类型的,逻辑是当点开下拉框，先把原始值保存起来，再把值直接赋值为空，保存起来的目的是防止用户没选直接关闭了下拉框，这种情况就需要用到原来保存起来的值

cascaderVisibleChange(value, type) {
  if (value) {
    if (type == "location") {
      this.oldLocation = this.formSearch.location;
      this.formSearch.location = "";
    } else if (type == "type") {
      this.oldType = this.formSearch.type;
      this.formSearch.type = "";
    }
  } else {
    if (type == "location" && !this.formSearch.location) {
      this.formSearch.location = this.oldLocation;
    } else if (type == "type" && !this.formSearch.type) {
      this.formSearch.type = this.oldType;
    }
  }
}