elementui的el-menu组件怎么实现点击一个让另一个是激活状态
时间: 2024-05-01 07:17:43 浏览: 14
您好,关于您的问题,可以使用el-menu中的selected属性来实现点击一个激活另一个的效果。具体来说,当一个菜单项被选中时,可以将其对应的key值存储在一个变量中,然后将其他菜单项的selected属性设置为false,将被点击的菜单项的selected属性设置为true,这样就可以实现只有一个菜单项处于激活状态的效果。以下是示例代码:
```html
<template>
<el-menu :default-openeds="['1']" class="el-menu-vertical-demo" :selected="selected">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group title="分组一">
<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 index="1-4">选项4</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>
<span>导航二</span>
</template>
<el-menu-item index="2-1">选项5</el-menu-item>
<el-menu-item index="2-2">选项6</el-menu-item>
<el-menu-item index="2-3">选项7</el-menu-item>
<el-menu-item index="2-4">选项8</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-document"></i>
<span>导航三</span>
</template>
<el-menu-item index="3-1">选项9</el-menu-item>
<el-menu-item index="3-2">选项10</el-menu-item>
<el-menu-item index="3-3">选项11</el-menu-item>
<el-menu-item index="3-4">选项12</el-menu-item>
</el-submenu>
</el-menu>
</template>
<script>
export default {
data() {
return {
selected: "1-1" // 初始化选中项为选项1
};
}
};
</script>
```
在上述代码中,我们通过设置selected属性来指定初始化选中的菜单项。可以根据具体需求再进行进一步的修改和扩展。希望这可以帮到您,谢谢!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)