Element下拉菜单中如何动态JS控制下拉菜单的展示和隐藏

Element下拉菜单中如何动态JS控制下拉菜单的展示和隐藏

添加ref控制 例如：myDropdown

<el-dropdown popper-class="custom_dropdown" trigger="click" ref="myDropdown">

从element-ui的源码中能看到

handleClick() {
        if (this.disabled) return;
        if (this.visible) {
          this.hide();
        } else {
          this.show();
        }
      },

方法 show 和 hide 便是控制显示和隐藏，所以在我们的页面中这样写

// 模拟点击事件来显示下拉菜单
            showDropdown() {
                this.$refs.myDropdown.show(); 
            },
            // 关闭下拉菜单
            hideDropdown() {
                this.$refs.myDropdown.hide(); 
            },