iview menu手动关闭子菜单和去除选择项选中状态(自制手风琴模式)

使用前提

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">
     
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值