vue3 怎么循环el-menu菜单
时间: 2023-11-22 10:57:45 浏览: 54
在 Vue3 中,我们可以使用 v-for 指令来循环 el-menu 菜单。具体步骤如下:
1. 在 data 中定义一个数组,用来存储菜单项的信息,如下所示:
```
data() {
return {
menuList: [
{
title: '菜单1',
icon: 'el-icon-s-home',
path: '/menu1'
},
{
title: '菜单2',
icon: 'el-icon-s-custom',
path: '/menu2'
},
{
title: '菜单3',
icon: 'el-icon-s-data',
path: '/menu3'
}
]
}
}
```
2. 在 el-menu 标签内部使用 v-for 指令循环渲染菜单项,如下所示:
```
<el-menu>
<template v-for="(item, index) in menuList">
<el-menu-item :index="item.path" :key="index">
<i :class="item.icon"></i>
<span slot="title">{{ item.title }}</span>
</el-menu-item>
</template>
</el-menu>
```
在上面的代码中,我们使用 v-for 指令循环渲染菜单项,其中 el-menu-item 组件的 index 属性绑定了菜单项的路径,key 属性用来区分每个菜单项的唯一性。在 el-menu-item 组件内部,我们使用 :class 绑定图标样式,使用 slot 绑定菜单项的标题。