vue element 两级菜单,一级在顶部,二级在左侧
时间: 2023-05-24 18:01:05 浏览: 797
您好,对于您的问题,以下是可能的解决方案:
可以使用 element-ui 提供的 el-menu 和 el-submenu 组件来构建您所需要的两级菜单。您可以将 el-menu 组件作为一级菜单放置在页面的顶部,el-submenu 组件则可以作为一级菜单的子菜单展开在左侧。
具体代码样例可以参考 element-ui 官方文档中关于菜单组件的介绍和示例。如果您遇到具体问题可以详细描述一下,我将竭力协助您解决。
相关问题
用vue写个菜单组件,一级菜单在顶部,二级菜单在左侧
好的,以下是一个简单的Vue菜单组件代码,一级菜单在顶部,二级菜单在左侧。
```
<template>
<div class="menu">
<ul class="menu-list">
<li v-for="(item, index) in menuList" :key="index" :class="{ 'active': activeIndex === index }" @click="toggleActive(index)">
{{ item.title }}
<ul class="submenu" v-if="item.children">
<li v-for="(subItem, subIndex) in item.children" :key="subIndex" :class="{ 'active': activeSubIndex === subIndex }" @click="toggleSubActive(subIndex)">
{{ subItem.title }}
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Menu',
data() {
return {
activeIndex: 0,
activeSubIndex: 0,
menuList: [
{
title: '一级菜单1',
children: [
{ title: '二级菜单1' },
{ title: '二级菜单2' }
]
},
{
title: '一级菜单2',
children: [
{ title: '二级菜单3' }
]
},
{
title: '一级菜单3'
}
]
};
},
methods: {
toggleActive(index) {
if (this.activeIndex === index) {
this.activeIndex = -1;
} else {
this.activeIndex = index;
}
this.activeSubIndex = -1;
},
toggleSubActive(index) {
this.activeSubIndex = index;
}
}
};
</script>
<style scoped>
.menu {
background-color: #eee;
}
.menu-list {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
.menu-list li {
cursor: pointer;
margin: 0 10px;
padding: 10px;
}
.menu-list li.active {
background-color: #ccc;
}
.submenu {
display: none;
position: absolute;
background-color: #fff;
list-style: none;
padding: 0;
margin: 0;
}
.menu-list li:hover > .submenu {
display: block;
}
.submenu li {
padding: 10px;
}
.submenu li.active {
background-color: #ccc;
}
</style>
```
这是一个简单的可折叠菜单,当你点击一级菜单时,它会展开或收起二级菜单。你可以根据你的需求修改这个组件。
vue3 选中一级菜单二级也选中
在Vue3中,要实现选中一级菜单同时选中二级菜单,可以通过使用v-model指令和计算属性来实现。
首先,使用v-model指令来绑定一级菜单的选中状态,当一级菜单选中时,v-model指令会自动更新绑定的数据。例如:
```html
<template>
<div>
<ul>
<li v-for="item in menuList" :key="item.id" @click="selectFirstLevel(item.id)" :class="{ active: selectedFirstLevel === item.id }">{{ item.name }}</li>
</ul>
<ul>
<li v-for="subItem in selectedSecondLevelList" :key="subItem.id" @click="selectSecondLevel(subItem.id)" :class="{ active: selectedSecondLevel === subItem.id }">{{ subItem.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
menuList: [
{ id: 1, name: '一级菜单1', children: [{ id: 11, name: '二级菜单1'},{ id: 12, name: '二级菜单2' }] },
{ id: 2, name: '一级菜单2', children: [{ id: 21, name: '二级菜单1'},{ id: 22, name: '二级菜单2' }] }
],
selectedFirstLevel: 1,
selectedSecondLevelList: []
}
},
methods: {
selectFirstLevel(id) {
this.selectedFirstLevel = id;
this.selectedSecondLevelList = this.menuList.find(item => item.id === id).children;
this.selectedSecondLevel = this.selectedSecondLevelList[0].id;
},
selectSecondLevel(id) {
this.selectedSecondLevel = id;
}
},
computed: {
selectedSecondLevel() {
return this.selectedSecondLevelList.find(item => item.id === this.selectedSecondLevel);
}
}
}
</script>
```
这样通过设置v-model指令绑定一级菜单的选中状态,并通过计算属性和方法来处理二级菜单的选中状态,就可以实现选中一级菜单同时选中二级菜单的效果。