VUE + ElementUI el-submenu的标题无法显示问题

VUE + ElementUI el-submenu的标题无法显示问题

预达到的效果:

预达到的效果

问题描述:

使用的是ElementUI中的NavMenu导航菜单中一模一样的代码,但是却出现了submenu的title无法显示的问题,效果如下(红框处没法显示图标和“导航一”的文字):

出问题的效果

问题分析:

但是加载elementui组件时,我选择Element-UI组件时报错了,所以使用了ElementPlus,所以需要改变代码中slot的title形式。

解决方案:

原本代码如下:

原来代码
改成如下即可:

修改后的代码

修改后界面效果如下:
修改后的界面

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是一个基本的后台管理界面模板,使用VueElementUI: ```vue <template> <div> <el-container> <el-header> <!-- 头部导航栏 --> <el-menu mode="horizontal" :default-active="$route.path"> <el-menu-item index="/home">首页</el-menu-item> <el-menu-item index="/user">用户管理</el-menu-item> <el-menu-item index="/product">商品管理</el-menu-item> </el-menu> </el-header> <el-container> <el-aside width="200px"> <!-- 侧边栏 --> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title">用户管理</template> <el-menu-item index="/user/list">用户列表</el-menu-item> <el-menu-item index="/user/add">添加用户</el-menu-item> </el-submenu> <el-submenu index="2"> <template slot="title">商品管理</template> <el-menu-item index="/product/list">商品列表</el-menu-item> <el-menu-item index="/product/add">添加商品</el-menu-item> </el-submenu> </el-menu> </el-aside> <el-main> <!-- 主要内容区域 --> <router-view></router-view> </el-main> </el-container> </el-container> </div> </template> <script> export default { name: "AdminLayout", data() { return { }; }, }; </script> <style> /* 样式可以根据需求自行修改 */ .el-header { background-color: #409eff; color: #fff; text-align: center; font-size: 20px; height: 60px; line-height: 60px; } .el-menu, .el-submenu { width: 100%; margin: 0; } .el-menu-item, .el-submenu__title { font-size: 16px; } </style> ``` 此模板包含了一个头部导航栏、一个左侧侧边栏和一个主要内容区域。侧边栏使用了ElementUI的`el-menu`和`el-submenu`组件,可以根据需求自行修改和扩展。主要内容区域使用了Vue的路由功能,根据路由的变化展示不同的组件内容。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值