vue3+element-plus里面的el-submenu组件显示问题

问题描述:


今天使用vue3做后台管理页面的左侧导航栏用到了el-submenu,但是显示出了问题,不能正常显示。感觉是这个组件的问题,查了一圈没找到解决方法,最后看官方文档发现el-submenu变成了el-sub-menu(大写的*,有点无语)
在这里插入图片描述


记录一下这个坑,感觉可能跟element-plus在21年十月份的更新之后出的这个问题,之前的版本好像没问题,因为时间问题,就不细扣什么时候更新的了,记录一下,防止后面的同仁趟坑。
  • 36
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
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`的属性设置和交互操作来控制侧边栏的折叠和展开状态,从而实现文字的隐藏和显示效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值