vue2 element ui el-cascader选中后没有自动收起不隐藏下拉

最新推荐文章于 2025-11-19 10:33:58 发布

原创最新推荐文章于 2025-11-19 10:33:58 发布 · 1.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui #javascript

收录于

js 同时被 2 个专栏收录

12 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

本文介绍如何使Element-UI的Cascader组件在选中后自动隐藏下拉列表，通过JavaScript定时操作和事件监听实现，提高用户体验。

el-cascader选中后不隐藏下拉

          <el-cascader
            ref="elcascader"
            @visible-change="elCascaderOnlick"
            @expand-change="elCascaderOnlick" 
          >
          </el-cascader>

    elCascaderOnlick() {
      let that = this
      setTimeout(function () {
        document.querySelectorAll('.el-radio__inner').forEach((el) => {
          el.onclick = function () {
            this.previousElementSibling.click()
            that.$refs.elcascader.dropDownVisible = false
          }
        })
        document.querySelectorAll('.el-cascader-panel .el-radio').forEach((el) => {
          el.onclick = function () {
            that.$refs.elcascader.dropDownVisible = false
          }
        })
      }, 100)
    },