el-menu无限层菜单
时间: 2024-08-01 19:01:45 浏览: 38
`el-menu` 是 Element UI 提供的一款用于构建导航栏菜单组件,它支持无限层级的设计。"无限层菜单"通常是指菜单可以展开到任意级别,用户可以通过点击父菜单来显示其下的所有子菜单,而无需预先定义好所有的层级结构。
在 Element UI 中,创建无限层菜单的基本步骤包括:
1. 定义数据结构:需要一个嵌套的对象数组,每个节点包含 `title`(文本)、`children`(子菜单)以及可能的其他属性如 `active`(默认选中状态)。
```javascript
const menuData = [
{
label: '一级菜单',
children: [
{ label: '二级菜单', children: [/* 子菜单 */] },
/* 更多子菜单 */
]
},
/* 其他一级菜单 */
];
```
2. 在 HTML 结构中,使用 `el-menu` 组件,并设置 `default-active` 属性来指定初始激活的菜单项,以及 `load-data` 钩子函数来动态加载下级菜单。
```html
<template>
<el-menu :default-active="0" @open-change="handleOpenChange">
<!-- 使用 v-for 循环渲染菜单 -->
<el-submenu v-for="(item, index) in menuData" :key="index" :index="index">
<template slot="title">{{ item.label }}</template>
<el-menu-item v-if="item.children" v-for="subItem in item.children" :index="subItem.index">
{{ subItem.label }}
</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
menuData,
};
},
methods: {
handleOpenChange(index) {
// 当打开新的子菜单时,这里可以触发异步加载操作
if (index !== -1) {
this.$axios.get('/api/menus/' + index).then(res => {
this.menuData[index].children = res.data;
});
}
},
},
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)