问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在vue中的el-dropdown 下拉菜单嵌套el-cascader-panel下，实现点击按钮后弹窗关闭？

头像
要出家的蛋挞_NcFJQ
    1
    头像
    ShirleyYD
    3681541
    新手上路，请多包涵


    如图所示，如何在vue中的el-dropdown 下拉菜单嵌套el-cascader-panel下，实现点击按钮后弹窗关闭

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
 
<body>
    <br>
    <div id="div">
        <el-dropdown ref="downGroup" trigger="click">
            <span @click="relodOptions">下拉 </span>
            <el-dropdown-menu slot="dropdown" ref="dropdownRef">
                <el-cascader-panel ref="NDepartment" :options="options" v-model="value"
                    :props="{ checkStrictly: true, expandTrigger: 'hover' }"
                    @change="handleChange(value, node)"></el-cascader-panel>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</body>
<script>
    new Vue({
        el: "#div",
        data() {
            return {
                options: [],
                value: ""
            }
        }, methods: {
            relodOptions() {
                this.options = [{
                    value: 'zhinan',
                    label: '指南',
 
                }, {
                    value: 'zujian',
                    label: '组件',
                }, {
                    value: 'form',
                    label: 'Form',
                    children: [{
                        value: 'radio',
                        label: 'Radio 单选框'
                    }, {
                        value: 'checkbox',
                        label: 'Checkbox 多选框'
                    }, {
                        value: 'input',
                        label: 'Input 输入框'
                    }, {
                        value: 'input-number',
                        label: 'InputNumber 计数器'
                    }, {
                        value: 'select',
                        label: 'Select 选择器'
                    }, {
                        value: 'cascader',
                        label: 'Cascader 级联选择器'
                    }, {
                        value: 'switch',
                        label: 'Switch 开关'
                    }, {
                        value: 'slider',
                        label: 'Slider 滑块'
                    }, {
                        value: 'time-picker',
                        label: 'TimePicker 时间选择器'
                    }, {
                        value: 'date-picker',
                        label: 'DatePicker 日期选择器'
                    }, {
                        value: 'datetime-picker',
                        label: 'DateTimePicker 日期时间选择器'
                    }, {
                        value: 'upload',
                        label: 'Upload 上传'
                    }, {
                        value: 'rate',
                        label: 'Rate 评分'
                    }, {
                        value: 'form',
                        label: 'Form 表单'
                    }]
                }]
            },
            handleChange() {
                alert(1)
                this.$refs.dropdownRef.hide();
            }
        }
 
    });
</script>

    我试了一下F12显示 vue.js:1897 TypeError: this.$refs.dropdownRef.hide is not a function该如何处理

    vue.js
    阅读 930
    avatarAI BotBETA

    在 Element UI 中，el-dropdown-menu 组件并没有直接提供 hide 方法来关闭下拉菜单。这是因为 el-dropdown 的下拉行为是由其内部的逻辑控制的，而不是直接通过外部调用某个方法来实现的。

    要实现点击 el-cascader-panel 内的某个选项后关闭 el-dropdown，你可以通过修改 el-dropdown 的 visible-change 事件监听器来实现。但是，由于 el-dropdown-menu 并没有直接暴露关闭的接口，我们需要利用 Vue 的响应式数据来控制 el-dropdown 的显示。

    下面是一个修改后的示例，展示了如何通过 Vue 的数据绑定来控制 el-dropdown 的显示和隐藏：

    <template>
  <div id="div">
    <el-dropdown :visible.sync="dropdownVisible" trigger="click">
      <span>下拉</span>
      <el-dropdown-menu slot="dropdown">
        <el-cascader-panel
          ref="NDepartment"
          :options="options"
          v-model="value"
          :props="{ checkStrictly: true, expandTrigger: 'hover' }"
          @change="handleChange"
        ></el-cascader-panel>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
new Vue({
  el: "#div",
  data() {
    return {
      dropdownVisible: false, // 控制下拉菜单的显示与隐藏
      options: [],
      value: ""
    };
  },
  methods: {
    relodOptions() {
      // 加载或更新选项...
      this.dropdownVisible = true; // 如果需要，可以在这里打开下拉菜单
      this.options = [
        // ... 你的选项数据
      ];
    },
    handleChange(value, node) {
      alert('选择的值: ' + value);
      this.dropdownVisible = false; // 更改数据以关闭下拉菜单
    }
  }
});
</script>

    在这个修改后的示例中，我使用了 v-model（或 :visible.sync，这是 Vue 2.3.0+ 引入的语法糖，等同于 v-bind:visible 和 @update:visible）来双向绑定 el-dropdown 的 visible 属性到一个名为 dropdownVisible 的数据属性上。这样，你就可以通过修改 dropdownVisible 的值来控制下拉菜单的显示和隐藏了。

    注意，由于你的 Vue 版本和 Element UI 版本可能不同，上面的 :visible.sync 语法可能需要根据你的具体环境进行调整。如果你使用的是 Vue 2.3.0 或更高版本，并且 Element UI 支持这种语法，那么上面的代码应该可以直接使用。如果不支持，你可能需要手动处理 visible-change 事件或使用其他方法来实现相同的功能。

    1 个回答
    得票最新
    头像头饰
    陟上晴明
      21.1k124691

      没有对应的API去关闭 Dropdown 组件。所以只能直接操作内部的 visible 属性。

      比如说 👉 CodePen Demo

      <script>
export default {
  name: "TEST",
  data() {
    return {
      keyword: '',
      optionList: ['黄金糕', '狮子头', '螺蛳粉', '双皮奶', '蚵仔煎']
    };
  },
  computed: {
    displayOptionList() {
      if(this.keyword === '') return this.optionList
      return this.optionList.filter(str => str.includes(this.keyword))
    }
  },
  methods: {
    handleCommand(key) {
      if (key) {
        this.$refs.elDropdown.visible = false // 关闭Dropdown弹出层
        this.$nextTick(() => {
          this.keyword = ''
        })
        alert(`您选择的是：${key}`)
      } else {
        if (this.keyword !== '') {
          const firstOption = this.displayOptionList[0]
          if(firstOption) this.handleCommand(firstOption)
        }
      }
    }
  }
}
</script>

<template>
  <el-dropdown ref="elDropdown" trigger="click" :hide-on-click="false" @command="handleCommand">
    <span class="el-dropdown-link">
      点击展开菜单<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>
        <el-input v-model="keyword" />
      </el-dropdown-item>
      <el-dropdown-item v-for="item in displayOptionList" :key="item" :command="item">
        {{ item }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

      之前写了一篇类似的笔记提到了 hide-on-click 置为 false 之后如何关闭 Dropdown，希望对你有一些些帮助 ElementUI 的 Dropdown 组件键盘操控异常抛出

      查看全部 1 个回答
      推荐问题
      宣传栏