vue.js - 如何在vue中的el-dropdown 下拉菜单嵌套el-cascader-panel下，实现点击按钮后弹窗关闭？
如图所示，如何在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该如何处理
共有1个答案
在 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 事件或使用其他方法来实现相同的功能。
-
下拉选择。 Usage 全部引入 import { Dropdown } from 'beeshell'; 按需引入 import { Dropdown } from 'beeshell/dist/modules/Dropdown'; Examples Code 详细 Code import { Dropdown } from 'beeshell'; <Dropdown ref={(c)
-
Toggle contextual overlays for displaying lists of links and more with the LCUI dropdown component. Overview Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’
-
Dropdown 下拉菜单 1.6.3 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 使用前说明： 该组件必须结合u-dorpdown和u-dropdown-item一起使用，展开的内容由u-dropdown-item通过传递参数或者slot提供 组件的菜单栏标题由u-dropdown-item通过title参数提供
-
将动作或菜单折叠到下拉菜单中。 基础用法 移动到下拉菜单上，展开更多操作。 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。 <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-
-
Dropdown 下拉菜单 将动作或菜单折叠到下拉菜单中。 基础用法 移动到下拉菜单上，展开更多操作。 :::demo 显示下拉菜单，默认情况下，下拉按钮只要hover即可，无需点击。 render() { return ( <Dropdown menu={( <Dropdown.Menu> <Dropdown.Item>黄金糕</Dropdown.Item
-
将动作或菜单折叠到下拉菜单中。 基础用法 移动到下拉菜单上，展开更多操作。 数据源 model 需要遵循一定的结构，详见文末的参考 <el-dropdown [model]="data" (selected)="handle($event)"> 下拉菜单 </el-dropdown> <script type="text"> // in component: data: any[] = [{