if the corresponding three-level menu is displayed when the mouse passes over the secondary menu
< el-menu-item index= "1" style= "width: 68px" @ mouseover.native= "show=true" @ mouseout.native= "show=false" > Product
<div v-show="show" class="menu_list" v-for="(item,index) in items">
<li @mouseover="showList=true" @mouseout="showList=false" >{{item.a}}
<div v-show="showList" class="menu_tree">
<el-col>
<span class="menu_sm"></span>
<span class="menu_sm"></span>
<span class="menu_sm"></span>
<span class="menu_sm"></span>
<span class="menu_sm"></span>
<span class="menu_sm"></span>
</el-col>
</div>
</li>
</div>
</el-menu-item>
< script >
export default {
name: "header",
data() {
return{
show: false,
showList: false,
items:[
{
"a":"1",
"children":[
{
"znzd":"",
"znbsq":"",
"aql":"",
"glq":"",
"wzjly":"",
"lybhq":"",
"gcjyy":"",
}
]
},
{
"a":"2",
"children":[
{
"znzd":"1",
}
]
},
{
"a":"",
"children":[
{
"znzd":"1",
}
]
},
{
"a":"",
"children":[
{
"znzd":"1",
}
]
}
]
}
},
methods:{
getIndex:function (index) {
}
}
}< / script >