Vue 在el-menu中导航栏实现方式

在el-menu中加上router参数，同时el-menu-item 中index直接写上链接地址，default-active="/home" 设置默认选中状态源代码如下：<el-menu default-active="/home" router><el-menu-item index="/home"><...

yjxfox

3976人浏览 · 2019-05-10 14:32:49

yjxfox · 2019-05-10 14:32:49 发布

在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上面自动添加 style="padding-left: 20px;" 针对 el-menu-item样式写 padding:0 !important; 这样就可以去除20px

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^