在 Vue 3 中使用 Element Plus 的 <el-menu> 组件时，默认情况下菜单项是关闭状态的。如果你想让某个菜单项默认处于展开状态，你可以通过设置菜单项的 default-active 属性来实现。
默认写法
步骤 1: 设置 default-active
你需要在 <el-menu> 组件上设置 default-active 属性，并为其提供一个值，该值应该是你希望默认激活的菜单项的索引或路径。
示例代码
假设你有一个简单的菜单结构，其中包含一个子菜单，你想让这个子菜单默认展开：
<template><el-menu :default-active="activeIndex" class="el-menu-vertical-demo"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>导航一</span></template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item><el-menu-item index="1-3">选项3</el-menu-item></el-sub-menu><el-menu-item index="2"><el-icon><document /></el-icon><template #title>导航二</template></el-menu-item><el-menu-item index="3" disabled><el-icon><setting /></el-icon><template #title>导航三</template></el-menu-item></el-menu>
</template><script setup>
import { ref } from 'vue';
import { Location, Document, Setting } from '@element-plus/icons-vue';const activeIndex = ref('1-1'); // 默认激活 "1-1" 菜单项
</script>说明
default-active属性：设置为'1-1'，表示默认激活index="1-1"的菜单项。el-sub-menu：用于创建子菜单。el-menu-item：用于创建菜单项。<el-icon>：用于显示图标。<template #title>：用于自定义菜单项的标题。
注意事项
- 如果你想让一个子菜单默认展开，可以将
default-active设置为该子菜单中的任意一个子菜单项的index。 - 如果你想让多个子菜单默认展开，可以使用数组形式的
default-active属性。
示例：多个子菜单默认展开
如果你想让多个子菜单默认展开，你可以将 default-active 设置为一个数组，包含你希望默认激活的菜单项的索引。
<template><el-menu :default-active="['1-1', '2']" class="el-menu-vertical-demo"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>导航一</span></template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item><el-menu-item index="1-3">选项3</el-menu-item></el-sub-menu><el-menu-item index="2"><el-icon><document /></el-icon><template #title>导航二</template></el-menu-item><el-menu-item index="3" disabled><el-icon><setting /></el-icon><template #title>导航三</template></el-menu-item></el-menu>
</template><script setup>
import { ref } from 'vue';
import { Location, Document, Setting } from '@element-plus/icons-vue';const activeIndex = ref(['1-1', '2']); // 默认激活 "1-1" 和 "2" 菜单项
</script>在这个例子中，default-active 设置为 ['1-1', '2']，表示默认激活 index="1-1" 和 index="2" 的菜单项。这将使得 index="1" 的子菜单及其第一个子菜单项 index="1-1" 处于展开状态，并且 index="2" 的菜单项也处于激活状态。
特殊写法
Menu 组件
<template><template v-for="(item, index) in menuList" :key="index"><!-- 没有子路由 --><template v-if="!item.children"><el-menu-item v-if="!item.meta.hidden" :index="item.path" @click="goRoute"><el-icon><component :is="item.meta.icon"></component></el-icon><template #title><span>{{ item.meta.title }}</span></template></el-menu-item></template><!-- 只有一个子路由 --><template v-if="item.children && item.children.length == 1"><el-menu-item v-if="!item.children[0].meta.hidden" :index="item.children[0].path" @click="goRoute"><el-icon><component :is="item.children[0].meta.icon"></component></el-icon><template #title><span>{{ item.children[0].meta.title }}</span></template></el-menu-item></template><!-- 有多个子路由 --><el-sub-menu v-if="item.children && item.children.length > 1" :index="item.path"><template #title><el-icon><component :is="item.meta.icon"></component></el-icon><span>{{ item.meta.title }}</span></template><Menu :menuList="item.children"></Menu></el-sub-menu></template>
</template><script setup lang="ts">
import { useRouter } from 'vue-router'
// 引入路由器
const $router = useRouter()
// 获取父组件传递的数据
defineProps(['menuList'])
// 点击菜单的回调
const goRoute = (vc: any) => {// 路由跳转$router.push(vc.index)
}
</script>
<script lang="ts">
export default {name: 'Menu'
}
</script>
<style scoped></style>菜单栏 组件：
<template><div class="layout_container"><!-- 左侧菜单 --><div class="layout_slider"><Logo></Logo><!-- 展示菜单 --><!-- 滚动组件 --><el-scrollbar class="scrollbar"><!-- 菜单组件 --><el-menu background-color="#2e2e2e" text-color="white" active-text-color="yellowgreen" :default-active="$route.path"><Menu :menuList="userStore.menuRoutes"></Menu></el-menu></el-scrollbar></div><!-- 顶部导航 --><div class="layout_tabbar">456</div><!-- 内容展示区域 --><div class="layout_main"><Main></Main></div></div>
</template><script setup lang="ts">
// 引入左侧菜单logo子组件
import Logo from './logo/index.vue'
// 引入菜单组件
import Menu from './menu/index.vue'
// 右侧内容的展示区
import Main from './main/index.vue'
// 获取路由对象
import { useRoute } from 'vue-router';
// 获取用户相关的小仓库
import useUserStore from '@/store/modules/user';
let userStore = useUserStore();// 获取路由对象
let $route = useRoute();
</script><style scoped lang="scss">
.layout_container {width: 100%;height: 100vh;background-color: red;.layout_slider {width: $base-menu-width;height: 100vh;background-color: $base-menu-bg;.scrollbar {width: $base-menu-width;height: calc(100vh - $base-menu-logo-height);.el-menu {border-right: none;}}}.layout_tabbar {position: fixed;width: calc(100% - $base-menu-width);height: $base-tabbar-height;background-color: cyan;top: 0px;left: $base-menu-width;}.layout_main {position: fixed;width: calc(100% - $base-menu-width);height: calc(100% - $base-tabbar-height);background-color: yellow;top: $base-tabbar-height;left: $base-menu-width;padding: 20px;overflow: auto;}
}
</style>
