Vue()如何调用el-menu对象的open方法

最新推荐文章于 2024-12-03 11:12:50 发布
最新推荐文章于 2024-12-03 11:12:50 发布
阅读量3.6k 收藏
点赞数
分类专栏： vue 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenxingchen/article/details/125102605
版权

在使用elementUI的菜单组件的时候，发现他有两个自带的函数，但是怎么拿到Menu对象，从而去调用这个函数

 

 

ElementUI的NavMenu 导航菜单水平展开左侧菜单时，默认打开子菜单（open方法：手动打开子菜单）
得之我幸
04-30 3715
文章目录情景知识点htmljs效果 情景 ElementUI的NavMenu 导航菜单model为vertical（默认）时，可以通过控制collaspe来控制菜单的水平折叠与展开，但是开启折叠的时候子菜单是关闭状态，现在是希望水平展开菜单的同时，子菜单也是展开状态 知识点 open方法：this.$refs.menu.open(index) html <el-menu ref="menu" router :class="minBoxRight ? 'left-menu' : '
使用element ui（el-menu）实现无线级菜单
weixin_44678368的博客
05-23 1027
实现的根本是MenuTree菜单组件一直调用自身。直接贴代码 封装组件MenuTree <template> <div> <template v-for="(item,index) in menuData"> <el-submenu v-if="item.type==='floder'" :index="item.title"> <template slot="title"> <i
element-ui 设置菜单栏展开的方法
01-21
element-ui 侧边栏默认要全部展开怎么做？ element-ui文档中是这么写的 default-openeds 当前打开的sub-menu的key数组 给<el></el>标签加上这个属性 <el class=el-menu-vertical open=handleOpen close=handleClose theme=dark default-openeds=openeds> openeds需要在data里面定义一下 openeds是一个数组（当前打开的sub-menu的 key 数组） data () { retur
Element Plus导航栏同时展开open和select方法的问题
byebukesi的博客
09-01 2003
Element Plus导航栏同时展开open和select方法的问题
el-menu 保持展开点击不收缩 默认选择第一个菜单
szzlh123456789的博客
05-13 3315
【代码】el-menu 保持展开点击不收缩 默认选择第一个菜单。
Vue中使用el-menu，点击二级菜单时一级图标保持高亮
Oamnij的博客
09-24 8989
Vue中使用el-menu，点击二级菜单时一级图标保持高亮一、案例二、使用步骤1.引入库2.使用el-menu总结 前言 自己在写项目的时候，写到菜单栏，发现只有一级菜单的时候，切换一级菜单的图标高亮很容易，但是在一级菜单下还有二级菜单的时候，点击二级菜单时，一级菜单的图标不能实现高亮。了解了一下发现el-menu没有这个功能，苦思冥想，自己找到了一个方法，记录一下。 一、案例 话不多说，先直接上图 二、使用步骤 1.引入库 在main.js中引入ElementUI组件，代码如下（示例）： impor
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
Vue2+El-Menu 实现路由跳转及当前项的设置方法实例 Vue.js 是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。 vue2+...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
7. **事件监听**：Element-UI的`el-menu`还支持自定义事件，如`@open`和`@close`，可以监听子菜单的展开和关闭，用于执行额外的操作。 综上所述，要实现在Element-UI的`el-menu`导航中保持刷新后选中状态，我们需要...
（1）vue基于el-menu实现导航菜单简单封装
weixin_42283712的博客
09-10 2583
el-container布局 <template> <el-container class="l_container"> <el-aside width="200px"> <SideMenu/> </el-aside> <el-container> <el-header>Header</el-header> <el-main>Main&l
vue+element el-menu递归多层菜单$emit事件失效
周家大小姐
07-19 1244
父组件 <!-- 左边菜单 --> <left-menu @handleLeftMenu='handleLeftMenu' :menuList='menuList' /> import LeftMenu from '@/components/leftMenu' data() { return { currentComponent: 'Dic', menuList: [ .
vue+element多层级菜单el-menu循环递归展示并默认激活
周家大小姐
08-12 1859
代码 menu子组件 <template> <div class="menu-content"> <!-- <el-menu @close="handleClose" :default-active="'0-0'" ref="menus" :default-openeds="openeds" mode="vertical" > --> <el-menu ref="menus" :default-active=".
element-plus动态渲染el-menu(vue3)
yasuo56的博客
06-02 2114
element-plus动态渲染el-menu(vue3)
element-ui菜单el-menu的使用
热门推荐
m0_63040701的博客
05-28 2万+
el-menu详解。
elementui el-menu 例子
weixin_43173924的博客
05-08 4209
<template> <div class="home"> <el-row class="tac"> <!-- 导航菜单 --> <el-col :span="4" class="left"> <el-row> <el-col :span="24"...
Vue3 使用el-menu 打开外链
最新发布
hengyua的博客
12-03 385
项目中会有需要在二级菜单中打开外部链接需要脱了原本框架打开一个新的页面, 实现思路是在menu的点击事件是加入判断,判断当前传入的path是否包括’http’,若包括使用 window.open(path, “_blank”);在新标签页打开外部链接。
Vue中dialog如何清空子组件的值: open和close的用法（$nextTick（[callback，context]））
Ginny_2019的博客
08-16 6844
最近学习Vue的时候，遇到了通过dialog打开子组件， 子组件中的值无法被清空，查阅API后，发现可以用open和close。 <el-dialog :visible="userUpdateVisible" width="800px" @open="onUserUpdateVisibleOpen()" @close="closeUserAdd()" > &lt...
【Vue3】el-menu的踩坑和使用
小安驾到的博客
07-04 5123
el-menu一些小技巧，满足更多少见需求！
el-menu内层级的默认展开和取值
zhaohr0225的博客
12-07 2625
el-menu内层级的默认展开和取值。
Element UI中 el-menu 组件 index 动态传参报错
weixin_46221897的博客
03-10 3102
在这里保存原因是 index 为String属性，但传入的值为 Number 类型 <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" > <el-menu-item v-for="(item,index) in ExportBoxNav"
vue2 el-menu可拖拽
05-17
Vue2和ElementUI结合使用时，可以通过使用el-draggable插件实现el-menu的拖拽功能。 安装el-draggable插件： ``` npm install vuedraggable --save ``` 然后在Vue组件中引入el-draggable组件，如下： ``` <template> <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"> <draggable v-model="menus"> <template v-for="item in menus"> <el-submenu v-if="item.children" :index="item.path"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{ item.name }}</span> </template> <draggable v-model="item.children"> <template v-for="child in item.children"> <el-menu-item :index="child.path">{{ child.name }}</el-menu-item> </template> </draggable> </el-submenu> <el-menu-item v-else :index="item.path"> <i :class="item.icon"></i> <span slot="title">{{ item.name }}</span> </el-menu-item> </template> </draggable> </el-menu> </template> <script> import draggable from 'vuedraggable' export default { components: { draggable }, data() { return { menus: [ { name: 'Dashboard', path: '/dashboard', icon: 'el-icon-menu', children: [] }, { name: 'Menu 1', path: '/menu1', icon: 'el-icon-menu', children: [ { name: 'Menu 1-1', path: '/menu1/menu1-1' }, { name: 'Menu 1-2', path: '/menu1/menu1-2' } ] }, { name: 'Menu 2', path: '/menu2', icon: 'el-icon-menu', children: [ { name: 'Menu 2-1', path: '/menu2/menu2-1' }, { name: 'Menu 2-2', path: '/menu2/menu2-2' } ] } ] } }, methods: { handleOpen(key, keyPath) { console.log(key, keyPath) }, handleClose(key, keyPath) { console.log(key, keyPath) } } } </script> ``` 在上面的代码中，我们使用了el-draggable组件包裹了el-menu组件，并且在el-submenu和el-menu-item组件中也使用了el-draggable组件，这样就可以实现el-menu的拖拽功能了。 需要注意的是，如果你使用了Vue3，那么需要使用vuedraggable@next版本。另外，如果你使用的是Vue3和Element Plus组件库，那么可以直接使用el-draggable组件，无需安装插件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文子阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值