总结: 点击的是 el-sub-menu 。 所以 el-sub-menu 的唯一性是必须的。否则 unique-opened 属性不生效
[Vue warn]: Invalid prop: type check failed for prop "uniqueOpened". Expected Boolean, got String with value "true". element ui 组件使用unique-opened = "true"时提示警告,使用动态参数解决。 <el-menu :unique-opened = true> 或 <el-menu :unique-opened = "true">...
<el-menu> v-if 会出现报错信息 如下代码:(报错信息:Duplicate keys found during update: 0 Make sure keys are unique. )<el-menu mode="horizontal" :default-active="$route.path" router> <template v-for="(item,key) in props.asideSubsMenu" :key="key"> <el-menu-item :index="item.path"...
// vertical-menu.vue组件 <template><el-menumode="vertical"background-color="#304156"text-color="#ffffff":unique-opened="true"active-text-color="#ffd04b":collapse-transition="false"class="el-menu-vertical-demo":default-active="$route.path"router></el-menu></template><script>export default...
在MenuCom中,我们首先使用el-menu来渲染菜单,通过default-active属性来设置默认选中的菜单项,通过unique-opened属性来设置只展开一个子菜单。 在MenuCom中,我们使用v-for来遍历菜单数据,通过v-if和v-else来判断菜单项是菜单还是子菜单。j接下来,我们使用el-submenu来生成子菜单,通过template slot="title"来设置子菜...
达成这样的效果,其实根本在于,通过开启el-menu的route属性,点击menu菜单后会进行路径的跳转,但是你跳转的路由地址必须写为根组件的子路由地址,否则会直接进行整个页面的跳转,失去了这样的效果。 然后看一下el-tabs,这里放一下elementUI的官方文档 子元素都是可以通过for遍历循环出来的,所以到了这里,基本的思路应该就...