vue 二级级联菜单

最新推荐文章于 2025-04-03 17:49:47 发布

hanmou77

最新推荐文章于 2025-04-03 17:49:47 发布

阅读量2.4k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/hanmou77/article/details/82855647

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文展示了如何使用Vue.js实现一个二级联动菜单的功能。通过数据驱动，动态显示菜单项，并通过点击事件实现子菜单的展开与收起效果。同时，菜单项具有激活状态，方便用户跟踪当前选中项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<ul class="sidebar-menu">
<li v-for="(item,index) in items" :key="index">
        <h2
@click="showToggle(item,index)"
:class="item.isSubShow && isShow === index? 'add-bg':''">{{item.name}}
<i
v-if="item.subItems"
class="arrow el-icon-arrow-down"
:class="item.isSubShow && isShow === index? 'rotate':''"></i>
</h2>
<ul
class="sub-menu" :class="item.isSubShow && isShow === index? 'active':''">
          <li v-for="(subItem,i) in item.subItems" :key="i">
            <h3
@click="subChange(item.name,i,subItem)"
:class="subShow === i && activeItem === item.name? 'sub-active':''">{{subItem.name}}</h3>
          </li>
        </ul>
      </li>
</ul>

data() {
return {
isShow:0,
subShow: -1,
activeItem: '',
items:[
{
name:'家用电器',
isSubShow:true,
subItems:[
{
name:'笔记本电脑',
url: '1'
},
{
name:'台式电脑',
url: '1'
},
{
name:'电视机',
url: '1'
}
]
},
{
name:'服装',
isSubShow:false,
subItems:[
{
name:'男士服装',
url: '1'
},
{
name:'女士服装',
url: '1'
},
{
name:'青年服装',
url: '1'
}
]
},
{
name:'服装2',
isSubShow:false,
url: '1'
}
]
}
},

methods: {
showToggle (item,index){
//判断如果当前点击的是其他选项就全部关闭
if(item.url){
alert(item.url)
}
if(this.isShow != index){
for(var i=0;i<this.items.length;i++){
this.items[i].isSubShow = false;
}

}
item.isSubShow = !item.isSubShow;
this.isShow = index;
},
subChange (name,i,subItem){
this.subShow = i;
this.activeItem = name;
alert(subItem.url)
}
},

.sub-menu{
max-height: 0;
overflow: hidden;
transition: all .3s ease;
}
.add-bg{
color: red;
}
.active{
max-height: 200px;
}
.arrow{
transition: all .3s ease;
}
.rotate{
transform: rotate(180deg);
}
.sub-active{
color: blue;
}