element-ui实现动态菜单栏并处理菜单栏折叠文本不隐藏问题

原创

于 2021-03-11 18:05:54 发布

· 1.2k 阅读

2 ·

版权

文章标签：

#vue

本文详细介绍了如何使用Element-UI库在Vue项目中实现动态生成菜单栏，并着重解决了菜单栏在折叠时文本不隐藏的问题，提供了一种有效的优化方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui实现动态菜单栏并处理菜单栏折叠文本不隐藏问题
在这里插入图片描述

<template>
  <el-aside style="width: auto"  >
  <!-- 导航 -->
  <el-menu
      :unique-opened="true"
      router
      class="el-menu-vertical-demo"
      @open="handleOpen"
      :default-active="defaultActive"
      @select="handleSelect"
      :collapse="iscollapse"
      active-text-color="#FF8500"
      text-color="#ffffff"
      background-color="#001529"
    > 
    <!-- 安装：vue-fragment   cnpm install --save vue-fragment -->
       <fragment class="user-menu-box" v-for="menu in menus" :key="menu.id">
        <!-- 无子菜单的 -->
        <el-menu-item v-if="!menu.child" :index="menu.path">
          <!-- <template v-slot:title> -->
            <i :class="menu.icon"></i>
            <span slot="title">{
  { menu.name }}</span>
          <!-- </template>  -->
        </el-menu-item> 
        <!-- 有子菜单的 -->
        <el-submenu v-if="menu.child" :index="menu.path">
          <template slot="title">
            <i :class="menu.icon"></i>
            <span slot="title"