el-menu懒加载
时间: 2024-05-08 17:13:48 浏览: 8
el-menu是Element UI框架中的一个组件,它是一个垂直菜单栏,支持分组、折叠、懒加载等功能。其中懒加载是指当菜单项被点击时,才去加载对应的子菜单项,而不是一开始就加载所有的子菜单项。
el-menu的懒加载可以通过设置menu-item组件的index属性为一个方法来实现,该方法在菜单项被点击时触发,并返回该菜单项对应的子菜单项的数据。
具体来说,你可以在el-menu中设置一个menu-item组件的index属性为一个方法,在该方法中异步请求子菜单项的数据,并返回一个Promise对象。当用户点击该菜单项时,el-menu会等待Promise对象完成后再去渲染子菜单项。
下面是一个示例代码:
```
<el-menu>
<el-submenu index="1">
<template slot="title">懒加载</template>
<el-menu-item :index="loadLazyMenu">加载子菜单</el-menu-item>
</el-submenu>
</el-menu>
<script>
export default {
methods: {
async loadLazyMenu() {
const data = await fetch('/api/lazy-menu').then(res => res.json())
return data.map(item => ({
index: item.id,
title: item.title,
children: item.children,
}))
},
},
}
</script>
```