vue Menu组件当前展开时其他收起

最新推荐文章于 2025-02-20 00:03:50 发布

原创

最新推荐文章于 2025-02-20 00:03:50 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

在Vue中，利用Menu组件可以轻松实现点击当前项展开，其他项收起的折叠效果。关键在于设置accordion属性，并通过@on-select事件监听选中项，传递name值来处理页面跳转。

点击当前展开时，当前展开其他收起，主要是 accordion 在<Menu/>写上就能了，剩下的就是跳转问题了，我是直接写了一个方法@on-select="changeMenu" 把name值传过去，然后跳转就解决了

 <Menu :active-name="$route.name" theme="light" ref="child" accordion  width="auto" :open-names="openNames" @on-select="changeMenu">
            <MenuItem name="homeIndex">
              首页
            </MenuItem>
            <Submenu name="productManagement" v-allow="[1,2,3,4]">
              <template slot="title">
                产品管理
              </template>
              <MenuItem name="productConfiguration" v-allow="1">产品配置</MenuItem>
              <!--<MenuItem name="productType" v-allow="2">产品类型配置</MenuItem>-->
              <MenuItem name="productContract" v-allow="2">产品合同配置</MenuItem>
              <!--<MenuItem name="productDataConfiguration" v-all