Vue在el-menu中导航栏实现⽅式
在el-menu中加上router参数,同时el-menu-item 中index直接写上链接地址,default-active="/home" 设置默认选中状态
源代码如下:
<el-menu default-active="/home" router>
<el-menu-item index="/home"><a href="javascript:;"><i class="iconfont icon-shouyeshouye"></i>⾸页</a></el-menu-item>
<el-menu-item index="/activity"><a href="javascript:;"><i class="iconfont icon-gongju"></i>活动管理</a></el-menu-item>
<el-menu-item index="/selfgoodsinfo"><a href="javascript:;"><i class="iconfont icon-shangpinguanli"></i>奖品管理</a></el-menu-item> <el-menu-item index="/order"><a href="javascript:;"><i class="iconfont icon-dingdanguanli"></i>订单管理</a></el-menu-item>
<el-menu-item index="/report"><a href="javascript:;"><i class="iconfont icon-report"></i>报表统计</a></el-menu-item>
导航页源码</el-menu>
编译后的代码如下:
在el-menu-item⽣成li之后会在li上⾯⾃动添加 针对 el-menu-item样式写 padding:0 !important; 这样就可以去除20px
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论