el-cascader点击任意一级的label，并将菜单收起

最新推荐文章于 2025-09-09 19:13:58 发布

原创最新推荐文章于 2025-09-09 19:13:58 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

本文档介绍了如何解决级联菜单在点击查询后不消失的问题，提出了两种方法。第一种方法是通过监听值变化关闭级联菜单，但存在性能消耗；第二种方法是暴露点击事件，直接关闭并赋值。这两种方案都实现了点击后级联菜单自动关闭的功能，同时避免了单选框的显示。

前言：需要一个级联菜单，点击任意一级就可以进行查询，然后级联菜单收起

根据element文档将checkStrictly设置为true就可以了：

可是问题又来了：1>以下级联菜单只能点击单选框生效 2>级联菜单选中后不消失，只能点击空白处才会消失

而我不需要单选框的出现，点击label直接选中，然后级联菜单消失

方法一：

选中让级联菜单收起：设置每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可（每次级联菜单的值有变化，就把级联菜单收起）

 watch: {
    handlerValue() {
      if (this.$refs.refHandle) {
        this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
      }
    }
  },

点击label选中：点击文本就让它自动点击前面的input就可以触发选择。

mounted() {
    setInterval(function() {
      document.querySelectorAll(".el-cascader-node__label").forEach(el => {
        el.onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      });
    }, 1000);
  },

方法一虽然把问题解决了，但是比较消耗性能

方法二：

级联菜单页面上把点击方法暴露出来