在上面的示例中,default-openeds 属性用于设置默认展开的子菜单的索引数组。在这个例子中,我们设置了 ['1'],这意味着索引为 1 的el-submenu 将会默认展开。 3. 测试效果 确保你的组件已经正确加载,并且子菜单在页面加载时默认展开。同时,检查其他菜单项和子菜单的功能是否受到影响。
在el-submenu的最后一节不展开的情况下,我们来探讨一下这种设计的原因和实际应用场景。 为什么要设计el-submenu最后一节不展开呢?这是因为在一些情况下,最后一级菜单可能是叶子节点,没有下一级子菜单,展开它没有意义。例如,在一个通用的网站导航菜单中,最后一级菜单可能是具体的页面链接,而不是下一级菜单。如果...
为了实现最后一节不展开的效果,我们可以通过判断当前子菜单的index与最后一节子菜单的index是否相等,来决定是否展开该子菜单。具体的实现方法如下所示: 我们需要在el-submenu中添加一个自定义属性isLast来标识是否为最后一节子菜单。然后,我们在el-menu的select事件中判断当前子菜单是否为最后一节子菜单,如果是,则不...
我这里使用Vue 3.2.41 + element-plus 2.2.26,首次显示不卡,但是点击按钮,切换左侧菜单的收起展开就很卡,要10多秒钟才能出来(我的菜单树形结构有4层,数量非常多) 根据@kooriookami说的与Chromium内核有关,我用操作系统自带的Edge浏览器,展开折叠不卡。用360浏览器(内核版本86的)也不会卡,用QQ浏览器(内核版本94...
el-icon-settingel-menu-item:菜单的子节点,不可再展开,常用属性:index:菜单的下标,文本类型,不能是数值类型。Vuerouter 来动态构建左侧菜单导航1页面1页面2...-openeds:默认展开的菜单,通过菜单的index值来关联。 :default-active:默认选中的菜单,通过菜单的index值来关联。el-submenu:可展开的菜单,常用属性:ind...
el-submenu> </el-menu> </template> export default { name: "Menu", data() { return { // 在 el-menu 中绑定 :collapse="iscollapse" ,预设值为 false,展开菜单 iscollapse: false, }; }, mounted() { // 用事件总线绑定事件,兄弟组件触发后,就传递参数true/false,控制是否展开 this.$bus.$...
</el-submenu> </el-menu> 在上面的示例中,我们创建了一个水平模式的菜单,并设置了默认选中的菜单项。同时,我们开启了路由模式,这样当点击菜单项时,会自动触发路由跳转。 需要注意的是,在使用el-menu的过程中,我们需要和VueRouter进行配合使用,以实现页面间的跳转和参数传递。当然,我们还需要配置相应的路由规则。
</el-submenu> </el-menu> 参数说明类型可选值默认值 mode模式string horizontal / vertical vertical collapse是否⽔平折叠收起菜单（仅在 mode 为 vertical 时可⽤）boolean—false background- color菜单的背景⾊（仅⽀持 hex 格式）string—#ffffff text-color菜单的⽂字颜⾊（仅⽀持 hex 格式）...
次导航保持展开一个 <el-tooltip content="开启该功能后,次导航只保持单个菜单的展开" placement="top"> <el-icon> <svg-icon name="ep:question-filled" /> </el-icon> <svg-icon name="ep:question-filled" /> </el-tooltip> <el-switch v-model="settingsStore.settings.menu.subMenuUniqueOpened...
</el-submenu> <el-menu-item index="3">选项三</el-menu-item> </el-menu> </template> ``` 在上面的示例中,我们使用了 el-submenu 组件来创建了一个嵌套的菜单项,用户可以通过鼠标悬停或点击来展开或收起子菜单,这样就可以实现一个嵌套菜单的效果。 3.2 折叠菜单 el-menu 还支持折叠菜单的功能,可以...