在上面的示例中,default-openeds 属性用于设置默认展开的子菜单的索引数组。在这个例子中,我们设置了 ['1'],这意味着索引为 1 的el-submenu 将会默认展开。 3. 测试效果 确保你的组件已经正确加载,并且子菜单在页面加载时默认展开。同时,检查其他菜单项和子菜单的功能是否受到影响。
在el-submenu的最后一节不展开的情况下,我们来探讨一下这种设计的原因和实际应用场景。 为什么要设计el-submenu最后一节不展开呢?这是因为在一些情况下,最后一级菜单可能是叶子节点,没有下一级子菜单,展开它没有意义。例如,在一个通用的网站导航菜单中,最后一级菜单可能是具体的页面链接,而不是下一级菜单。如果...
我们需要在el-submenu中添加一个自定义属性isLast来标识是否为最后一节子菜单。然后,我们在el-menu的select事件中判断当前子菜单是否为最后一节子菜单,如果是,则不展开该子菜单,如果不是,则展开该子菜单。具体的代码如下所示: ```html <template> <el-menu @select="handleSelect"> <el-submenu v-for="item...
第一步、创建SubMenu <template> <template v-for="menu in this.menuData" :key="menu.url"> <el-sub-menu v-if="menu.children" :index="menu.url" :key="menu.url" > <template #title> <el-icon><component :is="menu.icon"></component></el-icon>{{menu.name}} </template> </el-s...
7 因为还有子路由的菜单需要使用到el-submenu标签，它封装了展开/收起箭头。所以我们先从路由中提取出没有子路由的对象，直接通过el-menu-item标签来实现即可。而没有子菜单的菜单我们希望点击时能只能跳转路由，所以我们可以在el-menu-item外包裹个router-link标签，通过to属性来指向对应的路由。8 接着我们继续将...
在Vue Devtool中查看了一下,主要是patch非常耗时 后来edge版本升级到108.0.1462.46,折叠展开也卡了。 Liangqianyongmentioned this issueJun 12, 2023 [Component] [menu] menu组件展开卡顿#9910 Closed ramiwangmentioned this issueAug 21, 2023 Sign up for freeto join this conversation on GitHub. Already hav...
el-menu导航菜单的下拉折叠图标官⽹的折叠展开图标 要实现的：思路：1、⾸先替换折叠展开图标 2、使⽤right复制，把图标移动到需要展⽰的地⽅ .el-submenu__title { .el-submenu__icon-arrow { right: 220px;margin-top: -5px;} .el-icon-arrow-down { right: 220px;margin-top: -5px;} ....
Vue.use(ElementUI); 项目中的使用: 效果一,实现默认展开一级目录-行业聚焦: image.png template: <template><!-- :default-active="defaultActive" --><el-menu:default-openeds="['4']"active-text-color="#00C0FF"><el-submenu:index="item.id + ''"v-for="(item, index) in left_list":key...
问题一 el-submenu不加index的报错图 原因是index的属性值是定义组件时必须传入的。同时组件的@select也需要用到这个index 问题二 点击只有一级菜单时不自动合上其他已经展开的菜单 效果图如下 想要解决这个问题,就要用到组件提供的另外一个事件,@select事件,代码图如下 ...
问题一 el-submenu不加index的报错图 细节:el-submenu必须要加index 原因是index的属性值是定义组件时必须传入的。同时组件的@select也需要用到这个index 问题二 点击只有一级菜单时不自动合上其他已经展开的菜单 效果图 想要解决这个问题,就要用到组件提供的另外一个事件,@select事件,代码图如下 ...