设置element-ui 的菜单默认展开

布满荆棘的人生 2022-12-19 03:53 879阅读 0赞

## 第一步：给标签加上这个属性 ##

<el-menu class="el-menu-vertical" :default-openeds="openeds">

:defaultOpeneds=\[’…’\] 属性内容和下面的 里面的index内容是关联的，需要一样。

## 第二步：在data里定义openeds ##

data () {
        return {
          openeds: ['1'],
          uniqueOpened: false
        }
    }

openeds是一个数组（当前打开的sub-menu的 index数组）

## 具体示例 ##

<el-menu default-active="2" class="el-menu-vertical-demo" :collapse-transition="true" unique-opened :collapse="false" :router="true" :default-openeds="opends" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-submenu index="1" >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>权限管理</span>
        </template>
        <el-menu-item index="/blog/sys/user/userList">
          <i class="el-icon-menu"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="1-2">
          <i class="el-icon-menu"></i>
          <span slot="title">角色管理</span>
        </el-menu-item>
        <el-menu-item index="1-3">
          <i class="el-icon-menu"></i>
          <span slot="title">许可管理</span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
    </el-menu>

效果：  
![在这里插入图片描述][20201105124025220.png_pic_center]

[20201105124025220.png_pic_center]: /images/20221120/96bd60360e614b6f9a7004441fd5cb05.png

发表评论取消回复

表情：

评论列表（有 0 条评论，879人围观）

还没有评论，来说两句吧...

相关阅读

相关 React TreeSelect设置默认展开项的方法

需要实现TreeSelect组件的onTreeExpand、treeExpandedKeys方法。代码样例如下： 1.TreeSelect标签部分 rend

Love The Way You Lie/ 2024年02月21日 07:20/ 0 赞/ 42 阅读

相关 elementui tree怎样设置默认勾选

在树形菜单数据里面设置一个唯一的字段，这里我的就是id字段 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

我不是女神ヾ/ 2023年08月17日 16:37/ 0 赞/ 123 阅读

相关 ElementUI table标签展开行

一、概述当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。官方示例： test.vue <template> <el-

末蓝、/ 2023年01月15日 14:30/ 0 赞/ 256 阅读

相关设置element-ui 的菜单默认展开

第一步：给标签加上这个属性 <el-menu class="el-menu-vertical" :default-openeds="openeds"> :def

布满荆棘的人生/ 2022年12月19日 03:53/ 0 赞/ 880 阅读

相关 elementui tree 默认展开第一节点

> 代码如下 1.data设置存放id数组 2.默认展开属性赋值存放的id 3.监听watch事件 <template> <div class=

系统管理员/ 2022年11月06日 05:51/ 0 赞/ 686 阅读

相关 ElementUI 点击展开/隐藏

一、概述在项目，需要使用一个功能，点击某个按钮，展开/隐藏某些说明文字。二、项目演示新建一个vue项目，安装ElementUI 模块即可。新建test

蔚落/ 2022年10月29日 03:17/ 0 赞/ 417 阅读

相关 ElementUI--原理--折叠展开动画

原文网址：[ElementUI--原理--折叠展开动画\_IT利刃出鞘的博客-CSDN博客][ElementUI--_--_IT_-CSDN] 其他网址 [elemen

Dear 丶/ 2022年09月03日 05:25/ 0 赞/ 246 阅读

相关 vue使用ElementUI时导航栏默认展开

vue使用ElementUI时导航栏默认展开本文主要参考： http://element.eleme.io/\/zh-CN/component/menu 在使

亦凉/ 2022年06月09日 23:37/ 0 赞/ 849 阅读

相关 JSTree 默认展开树节点默认展开

红色部分 $("\jstree\_demo")

我不是女神ヾ/ 2022年06月09日 04:45/ 0 赞/ 768 阅读

相关 miniui.TreeGrid设置子节点默认展开

实现效果 ![这里写图片描述][70] 请求参数（tasks.txt） [{ "UID": "1", "Name": "项

末蓝、/ 2022年05月25日 13:45/ 0 赞/ 164 阅读