elementUI侧边栏默认展开所有的菜单
在Element UI中,侧边栏菜单默认展开所有项目可以通过设置default-openeds
属性来实现。这个属性接受一个数组,数组中的每个元素是需要默认展开的菜单项的index
。
以下是一个简单的例子,展示如何设置默认展开所有侧边栏菜单项:
<template>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:default-openeds="['1', '2']" // 设置所有菜单项默认展开
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-submenu>
<!-- 其他菜单项 -->
</el-menu>
</template>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log('菜单项展开', key, keyPath);
},
handleClose(key, keyPath) {
console.log('菜单项关闭', key, keyPath);
}
}
};
</script>
在这个例子中,:default-openeds="['1', '2']"
表示菜单项1
和2
将会默认展开。你需要根据实际的菜单结构来更新index
值。如果你想要展开所有的菜单项,你可以通过计算属性来获取所有的菜单项的index
并设置到default-openeds
。
评论已关闭