el-menu调用两次mounted
时间: 2023-10-16 09:09:37 浏览: 32
可能是因为 el-menu 组件有子组件或者插槽,这导致 el-menu 组件的 mounted 钩子函数被调用了两次。你可以尝试在 el-menu 组件的 mounted 钩子函数中打印一些信息,以便确定是哪个子组件或插槽导致了这个问题。另外,你也可以尝试在 el-menu 组件的 created 钩子函数中进行初始化操作,以避免在 mounted 钩子函数被调用多次时出现问题。
相关问题
el-menu动态添加导航
可以使用 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>
```
使el-sub-menu主动展开
要使el-sub-menu主动展开,您可以在el-submenu标签上添加一个v-model属性,并将其绑定到一个data中的变量上。然后,您可以通过在该变量上设置true值来触发子菜单的展开。以下是示例代码:
```
<template>
<div>
<el-menu default-active="1" class="el-menu-demo" mode="horizontal">
<el-submenu index="1">
<template slot="title">导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">导航二</el-menu-item>
<el-menu-item index="3">导航三</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
submenuOpen: false
}
}
}
</script>
<style scoped>
.el-submenu__title:hover {
color: #409EFF;
}
</style>
```
然后,在需要触发展开的地方,您可以使用以下方法来改变`submenuOpen`变量的值:
```
this.submenuOpen = true;
```
例如,在组件的mounted钩子函数中:
```
mounted() {
this.submenuOpen = true;
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)