element-plus中取消el-menu的选中状态
时间: 2023-10-13 18:18:49 浏览: 1902
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
5星 · 资源好评率100%
在element-plus中,取消el-menu的选中状态可以通过以下两种方式实现:
1. 使用v-model绑定当前选中的菜单项,在取消选中状态时将v-model的值设为null即可:
```html
<el-menu v-model="selectedMenu">
<el-menu-item index="1">菜单项1</el-menu-item>
<el-menu-item index="2">菜单项2</el-menu-item>
</el-menu>
<script>
export default {
data() {
return {
selectedMenu: null
}
}
}
</script>
```
2. 使用ref获取到el-menu实例,调用其方法`setCurrentIndex`将当前选中的菜单项索引设置为-1即可取消选中状态:
```html
<template>
<el-menu ref="menu">
<el-menu-item index="1">菜单项1</el-menu-item>
<el-menu-item index="2">菜单项2</el-menu-item>
</el-menu>
</template>
<script>
export default {
mounted() {
this.$refs.menu.setCurrentIndex(-1);
}
}
</script>
```
以上两种方式均可实现取消el-menu的选中状态,具体选用哪种方式取决于你的实际需求。
阅读全文