el-menu动态添加导航
时间: 2023-11-09 20:03:44 浏览: 90
可以使用 el-menu 的 API 方法 add 方法来动态添加导航,具体步骤如下:
1. 获取 el-menu 组件的实例,可以使用 ref 属性获取。
2. 使用 add 方法添加导航,需要传入一个对象,包含以下属性:
- index:导航的唯一标识符,必填。
- title:导航的标题,必填。
- path:导航的路径,可选。
- icon:导航的图标,可选。
示例代码如下:
```html
<template>
<el-menu ref="menu" :default-active="activeIndex" class="el-menu-vertical-demo">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span slot="title">导航一</span>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
data() {
return {
activeIndex: '1'
}
},
mounted() {
// 获取 el-menu 组件的实例
const menu = this.$refs.menu
// 添加导航
menu.add({
index: '2',
title: '导航二',
path: '/nav2',
icon: 'el-icon-setting'
})
}
}
</script>
```
阅读全文