代码如下 <template><divclass="homeBox"><divclass="left"><divclass="leftNav"><el-menu:default-active="activeIndex"class="elMenu"background-color="#333"text-color="#B0B0B2"active-text-color="#fff"@open="handleOpen"@close="handleClose":unique-opened="true"router><el-menu-itemindex="ea...
因为我的项目用了vue-router,页面通过<router-view></router-view>引入组件的,所以我就想,在进入组件的时候,设置公共变量值adminleftnavnum为导航的index,然后在导航所在的组件watch该变量, 设置el-menu的 :active=”adminleftnavnum”,这样基本上就可以实现该效果了。 1、引入扩展库 要使用公共变量,我们先引入vue...
el-menu的用法如下: el-menu-item是组件元素。 el-menu-item可直接在el-menu中使用。 el-menu-item也可插入元素。 el-menu-item-group是组件组,可包含el-menu-item以及模板插槽。 此外,el-menu还有以下属性: index:唯一标志。 popper-class:为popper添加类名。 show-timeout:展开sub-menu的延时。 hide-time...
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-menu :collapse="collapseStatus" :unique-opened="uniqueOpened" :collapse-transition="false" mode="vertical" > <sidebarItem v-for="(route, index) in menuData" :key="index" :item="route" /> </el-menu> </el-scrollbar> </div> </temp...
我的页面是三级嵌套路由,结构类似于 /message/detail/0。页面的菜单使用了element-ui的el-menu但我点击菜单的选项返回首页的时候,页面路径变成了/message/detail/index。
问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :router="true" ...
el-menu-item遍历后台传回的数据时,设置:index="item.name" 会报错如下: 解决办法:index的值不能有空格,并且是字符串类型,我上面是自己接受...
1、如果给default-active设置一个默认值,那么刷新页面时,会出现一个问题,即路由地址和菜单对应的index是不一致的。 <el-menu routerdefault-active="/"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"> image.png 如上图所示,当前页面应该是数据分析,路由地址是/analyse,但是刷新页...
el-menu-item遍历后台传回的数据时，设置:index="item.name" 会报错如下：解决办法：index的值不能有空格，并且是字符串类型，我上面是自己接受到数据遍历添加的一个下标，把他转为字符串就不会报错了
在实施步骤一的过程中，复制官方代码并进行修改。为了展示代码，我们附上代码图示和代码片段。在“踩坑”过程中，发现第一个问题：当使用el-submenu时，如果未添加“index”属性，会出现报错“Missing required prop: 'index'”。这是因为“index”属性在组件初始化时必须提供，且在组件内部的逻辑中，如@...