vue3使用element elpus 组件库中的menu组件，collapse不折叠

最新推荐文章于 2023-11-09 15:52:59 发布
最新推荐文章于 2023-11-09 15:52:59 发布
阅读量262 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/poguanba/article/details/133028338
版权

我的情况是这样的，动态创建路由，项目参照尚硅谷的教学视频

menu自己封装的组件

按照官方文档使用的

但是效果是这样

就很难评，后面发现其实是需要将图标拿出来就好了，emmmm...，好了一半

遇到这种情况的话，直接将menu自己封装的这个组件里面的最外层的div删掉就ok了

poguanba
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue实现对左边菜单的折叠与展开
m0_51459514的博客
03-29 4258
在el-menu中使用以下两种属性 collapse 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） boolean — false collapse-transition 是否开启折叠动画 boolean — true 具体实现代码 1.添加属性，并进行动态绑定即：，如果没有：则不识别。collapse-transition的存在是为了让折叠不卡顿。 <el-menu background-color="#3337
Element_ui组件.rar
03-16
Element UI 是一个基于 Vue.js 的开源前端组件库，它提供了丰富的界面组件，旨在使开发者能够快速构建美观且响应式的 Web 应用。在 Axure 中，它可以作为一个元组件使用，帮助设计人员更高效地创建原型。 标题 ...
element默认左侧菜单全部展开，禁止收缩
爱打篮球的猿
01-14 4887
<template> <el-menu class="el-menu-vertical-demo" @close="handleClose" :default-active="$route.path" ref="menus" :default-openeds="['0','1','2']" v-menuIcon > </el-menu&gt
el-submenu折叠失效，文字和＞显示
qq_43987527的博客
07-13 922
el-submenu折叠实现 文字显示
Vue()-常用组件之Menu组件
Good Luck
06-04 1975
左侧菜单组件
用Vue3自定义右键菜单，利用插槽封装＜ContextMenu＞组件
最新发布
m0_51108612的博客
11-09 1136
在使用vue3的时候，我们可能需要对el-table等组件进行右键操作，如何为组件封装好一个右键菜单？
ElementUI的折叠面板不生效的原因
路飞船长的博客
06-27 1161
页面的一些输入框太多,需要将不必要的通过折叠面板隐藏起来一般来说这个组件放进代码不需要更改太多东西,但是不知道什么原因组件放上去不可用,也就是没有任何效果我怀疑是没有写css的原因,但是网上搜索过很多的相关代码有的不写css也可以实现,但我觉得还是因为css原因,但是只是猜测不能确定,后来发现需要在main.js引入css相关文件,其实UI很好用,只是有些功能组件需要引入相关文件才可以使用import ElememtUI from 'element-ui'; import 'element-ui/lib/t
element-ui 离线中文文档api下载 版本2.4
09-19
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可自定义的企业级前端界面。版本 2.4 是 Element UI 的一个稳定版本，发布于某个时间点，包含了当时最新的功能和优化。...
Element UI元件库.zip
06-03
3. **布局组件**：栅格系统（Grid）、卡片（Card）、折叠面板（Collapse）、导航菜单（NavMenu）、步骤条（Steps）等，帮助设计师构建页面结构和导航。 4. **数据展示**：表格（Table）、标签页（Tabs）、分页...
版本2.4 element-ui 离线中文文档api
01-05
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建美观、可自定义且响应式的用户界面。版本 2.4 是 Element UI 的一个重要里程碑，其中包含了大量的改进和优化。这个离线版的 ...
element-ui离线文档2.15.7最新版
02-09
Element UI 是一个基于 Vue.js 的开源前端组件库，它提供了丰富的界面组件，如表格、按钮、下拉菜单、轮播图等，用于快速构建优雅的中后台应用界面。2.15.7 版本是 Element UI 的一个重要版本，包含了众多优化和改进...
硅谷甄选项目：element-plus中有多个子菜单的菜单的折叠功能失效
m0_64506822的博客
07-15 584
下面是Menu组件的内容，其中menuList是一些路由信息，根据路由信息动态生成菜单。
element-ui的菜单默认全部展开并且禁止收起
weixin_43660626的博客
12-18 6854
<template> <el-menu class="el-menu-vertical-demo" @close="handleClose" :default-active="$route.path" ref="menus" :default-openeds='defaultOpeneds' v-menuIcon > </el-menu&.
Vue 三层菜单栏中，菜单的展开和收起问题的解决办法
热门推荐
简单随风的博客
04-10 2万+
例如我们有这样一列菜单 <el-menu> <el-submenu index="1"> <template slot="title"><i class="el-icon-date"></i>一级菜单1</template> <el-submenu index=...
element 去掉表格底部白线
freya_Du的博客
04-17 5193
使用elementui 的表格，底部会出现一条白线，想要取消，可以在表格的伪类里面修改 代码如下 .el-table::before { height: 0px; }
element-ui中NavMenu（el-menu）功能优化
Annie的博客
09-15 6225
用过NavMenu组件的同学应该很熟悉，组件在horizontal模式下提供了两种触发方式：hover和click。然而在click模式下，有个弊端：如果页面中引入多个el-menu组件，由于每个el-menu相互独立，展开一个菜单后，再展开其他菜单时，前面展开的菜单并不会自动收起，这在使用时很不方便。那么，怎么来解决click模式下两个el-menu同时展开的问题呢？（注意：这里说的同时展开不是由unique-opened控制的保持一个子菜单展开） 为了方便说明，我们将接受鼠标点击的导航称为menu，点
使用el-menu，菜单折叠后悬浮菜单不出现以及图标不显示的可能原因
Boneex的博客
05-22 3953
使用element-plus组件el-menu遇到的图标不显示，悬浮框不出现问题的解决方案
【Ant Design Vue 】之Menu菜单
张营的技术博客
03-11 1万+
文章目录常用属性常用事件递归嵌套多级菜单效果 版本ant-design-vue: "^1.7.4", 常用属性 属性 说明 默认值 mode 菜单类型，现在支持垂直、水平、和内嵌模式三种 vertical inlineCollapsed inline 时菜单是否收起状态 theme 主题颜色(light/dark) light openKeys(.sync) 当前展开的 SubMenu 菜单项 key 数组 defaultOpenKeys 初始展开的 SubMenu
vue3中el-collapse-item不想点整个标题折叠和展开
康歌的专栏
05-30 1553
vue3中el-collapse-item不想点整个标题折叠和展开
vue3+element-plus侧边栏折叠
09-14
在Vue 3 和 Element Plus 的组合中，要实现侧边栏折叠的效果，可以使用`el-menu`作为根节点，并结合`el-menu-item`和`el-submenu`来构建菜单栏。 首先，在模板中使用`el-menu`作为整个菜单的容器，并设置`collapse`属性来控制侧边栏的折叠状态。当`collapse`为`true`时，侧边栏折叠，文字会隐藏。当`collapse`为`false`时，侧边栏展开，文字会显示。 ```html <template> <el-menu :collapse="isCollapse"> <!-- 菜单项 --> <el-menu-item index="1">菜单项1</el-menu-item> <el-menu-item index="2">菜单项2</el-menu-item> <!-- 子菜单 --> <el-submenu index="3"> <template #title> 子菜单 </template> <el-menu-item index="3-1">子菜单项1</el-menu-item> <el-menu-item index="3-2">子菜单项2</el-menu-item> </el-submenu> </el-menu> </template> ``` 然后，在data中定义一个`isCollapse`变量来控制折叠状态的切换。通过点击按钮或其他交互方式，修改`isCollapse`的值来实现侧边栏的折叠和展开。 ```javascript <script> export default { data() { return { isCollapse: true, // 初始化折叠状态为true，侧边栏默认折叠 }; }, }; </script> ``` 需要注意的是，`el-menu`标签本身希望里面嵌套的是`el-menu-item`、`el-submenu`、`el-menu-item-group`其中之一。因此，我们要根据菜单的结构来合理使用这些标签。 通过上述方法，你可以实现在Vue 3 和 Element Plus 中的侧边栏折叠效果。根据`el-menu`的属性设置和交互操作来控制侧边栏的折叠和展开状态，从而实现文字的隐藏和显示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值