element-plus默认菜单打开

在 Vue 3 中使用 Element Plus 的 <el-menu> 组件时,默认情况下菜单项是关闭状态的。如果你想让某个菜单项默认处于展开状态,你可以通过设置菜单项的 default-active 属性来实现。

默认写法

步骤 1: 设置 default-active

你需要在 <el-menu> 组件上设置 default-active 属性,并为其提供一个值,该值应该是你希望默认激活的菜单项的索引或路径。

示例代码

假设你有一个简单的菜单结构,其中包含一个子菜单,你想让这个子菜单默认展开:

html 复制代码
<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>

说明

  1. default-active 属性 :设置为 '1-1',表示默认激活 index="1-1" 的菜单项。
  2. el-sub-menu:用于创建子菜单。
  3. el-menu-item:用于创建菜单项。
  4. <el-icon>:用于显示图标。
  5. <template #title>:用于自定义菜单项的标题。

注意事项

  • 如果你想让一个子菜单默认展开,可以将 default-active 设置为该子菜单中的任意一个子菜单项的 index
  • 如果你想让多个子菜单默认展开,可以使用数组形式的 default-active 属性。

示例:多个子菜单默认展开

如果你想让多个子菜单默认展开,你可以将 default-active 设置为一个数组,包含你希望默认激活的菜单项的索引。

html 复制代码
<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**组件

html 复制代码
<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>

菜单栏 组件:

html 复制代码
<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>
相关推荐
待磨的钝刨7 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式