使用前提
iview menu菜单中是有自带手风琴模式的。
1、在菜单项没有子菜单时,点击一个会去除之前的菜单项选中状态的
2、在munu全为子菜单时添加accordion便能大道手风琴效果这里不赘述。
目标效果
如图,点击数据报表这种时,会关闭警示信息这种之前展开的子菜单项,在展开警示信息这个子菜单时会清除数据报表的选中状态并自动选中子菜单第一个项。
原理是修改绑定的展开或选中项的name值,之后通过官方方法更新菜单状态。
注:熟悉的可以直接拉到代码实现的第三项事件,相信会有所启发!
代码实现
1、HTML
重要提示注意:
1)ref//这个之后用
2)on-select//选中时
3)on-open-change//展开子菜单时
<Menu ref="menuList" @on-select="choseItem" @on-open-change="openSubmenu" :active-name='activeName' :open-names="openName" theme='dark' width="auto" :class="menuitemClasses">
<div v-for="(item1,index1) in siderLists" :key="index1">
<!-- 列菜单 -->
<Submenu :name="item1.name" v-if="item1.children.length>0">