vue 二级级联菜单

<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;
}