elementUI菜单组件压缩后默认打开二级目录

最新推荐文章于 2024-05-14 16:27:26 发布
最新推荐文章于 2024-05-14 16:27:26 发布
阅读量1.1k 收藏
点赞数
文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxgjjh/article/details/122310038
版权

在第一次使用elementUI的时候出现了这个比较尴尬的问题，因为每次收缩后二级菜单都会被打开，而且还自动添加了点击的样式

压缩后的样子

 这显然是不合理的，我在偶然中发现只要有一个点击之后，后面再次收缩展开就不会出现这个问题了，于是我就设置了首页默认选中这样就可以解决这个问题了

只要保证default-active的值和菜单的index值相同就可以了 

@温馨提示
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
elementUI table组件
11-09
elementUI table组件 使用vue组件编写的el-table 反正就是一个表格组件， ref="table" v-loading="pageParm.loading" :max-height="pageParm.tableHeight || undefined" :data="data" :default-expand-all=...
ElementUI三级联动菜单代码
06-07
ElementUI三级联动菜单代码，省市区三级联动代码，功能如下：1.可以查询搜索；2.可以清楚输入框内的记录。
el-cascader默认展开第一行所有子项
m0_64023063的博客
07-27 2070
【代码】el-cascader默认展开第一行所有子项。
elementUI select组件默认选中效果实现的方法
10-17
主要介绍了elementUI select组件默认选中效果实现的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
关于element ui中引入官方的NavMenu时出现点击某个子菜单时，所有的子菜单全都展开问题
qq_41373791的博客
10-26 2848
问题描述 使用官方代码，为项目添加了多级导航菜单。但是，当我点击某个菜单的某一项时发现，不止当前菜单项的子菜单展开了，所有菜单项子菜单全都展开。 解决方法 这是由子菜单项的index属性引起的，但我们为每个子菜单项的index属性添加相同的值时就会出现这种情况。所以为每个子菜单项添加不同的index属性值就可解决。 ...
设置el-cascader级联组件只有第2级别可选
qq_38969618的博客
03-19 3230
.el-cascader__dropdown .el-cascader-menu:first-child .el-cascader-node label{ display:none; }
element-UI级联选择器(Cascader 回显、默认显示项) - （返回结果的）格式转化 - 代码篇
热门推荐
草巾冒小子的博客
03-26 4万+
el-cascader组件 ：（返回结果的）格式转化 有时候会报错：TypeError: thsAreaCode.replace is not a function （bug截图如下） 说白了就是该组件结果返回获得的是个数组，而不是字符串。所以不能使用.replace方法去转化格式。 因而：才有了下面修改后的代码。 为了解决上述问题，先看文章内的举例代码： 参考文章：（element-U...
el-cascader 自动展开第一项或者某一项的下一级
weixin_43957384的博客
05-20 4724
想要实现的效果 当选择项只有一个的时候 自动展开下一级 最后一级和第一级的时候 用户自己点击 其他时候自动展开 看到源码是这样操作的 大家有更好的可以交流啊 <template> <el-cascader ref="cascader" v-model="path" placeholder="请选择关联项目" :props="props" :disabled="disabled" @visible-change="visibleChang
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
weixin_44021888的博客
07-05 2043
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
前端小记--2.element-ui中级联选择器cascader如何默认展开下拉框
u012830884的博客
12-02 2012
由于下拉框选择内容是树状结构，这里使用了element-ui中级联组件cascader，设置单选模式即可。但是在官方的文档中没找到默认展开下拉框的api，折腾了一番，只能去看下源码了。这里我们只需用ref获取级联组件的对象，调用其toggleDropDownVisible方法即可默认展示下拉框。最近做项目时，遇到一个需求：在一个排班表中，展示人员的值班情况，点击单元格，弹出下拉框，修改人员排班信息。小提示：通过v-for生成的对象，获取ref时，结果是个数组。
el-cascader-panel 动态加载 + 初始化展开
weixin_56478633的博客
12-04 999
例如：el-cascader-panel 源码压缩位置 node_modules\element-ui\lib\element-ui.common.js。例子：查看element-ui所打包的js文件修改源码，随意打印测试查看控制台是否启动成功。el-cascader-panel 如何初始化。// 如果刷新：通过v-if控制刷新数据。默认通过v-model绑定初始值会报错。如有更好的解决方法，请告知我学习学习。通过debugger查看执行过程。
elementui 恢复级联菜单el-cascader的默认状态
ocean_stars的博客
10-14 2552
单纯改变v-model值或者清空v-model值会有下面的情况，保留了上次的选择路径，与需求不符，所以针对这种情况做了下级联面板的重置。 在官网demo基础上做修改（代码1），增加ref。新增个按钮做重置操作（代码2） // 代码1 <div class="block"> <span class="demonstration">默认 click 触发子菜单</span> <el-cascader ref="cascader" v-mod
最新版ElementUI-web-Axure组件库
03-12
最新版ElementUI web版 Axure组件库，用Axure9.0创建，带丰富的交互 包含图标、页面模版、统计图、案例、元件库 将文件解压，击+组件处的加号，选择里面的文件导入就能用了
elementUI侧边栏默认展开所有的菜单
m0_53591810的博客
03-16 5104
首先要在el-menu标签上添加:default-openeds="openeds"属性，并且在data里面定义，定义的是每一个index的值。
使用Element UI导航菜单默认展开子菜单
qq_51196135的博客
12-27 6610
⚠️这里 index的属性值由中定义，将想要展开的菜单目录的index值写在数组openeds即可。2、openeds 是默认展开菜单的 的index属性的值的集合，是一个数组。4、index最终值（onlyOneChild.path）实现效果：登陆项目即自定义展开菜单均展开显示！1.需要给 添加属性。
【总】设置el-cascader级联结构为2级时，只有第2级可勾选且点击label就可选中，且绑定值直接为第2级id数据。(popper-class属性可用来区分多个级联)
qq_38969618的博客
05-20 7879
popper-class属性、css相关设置
element menu子菜单默认展开&&高亮
Ton555555的博客
07-26 6477
一切交给路由router 一 、层级导航布局 element 默认展开子菜单，刷新路由展开子菜单，子菜单自动高亮 默认展开的组： default-openeds属性控制 === 值为数组defaultMenu包含所有的submenu 的index值 默认高亮的子菜单有属性active控制， active: currentMenu === menu.linkName <template> <div class="nav-menu"> <el-menu
element默认展开所有菜单
li_mingc的博客
02-03 1万+
``@TOC element默认展开所有菜单 展开菜单用到要在el-menu标签中添加 :default-openeds=“openeds” ， openeds是默认展开菜单的el-submenu的index属性的值的集合，是一个数组。 要展开所有一级菜单的话，openeds里就存放所有一级菜单的index。我这里下标用的是路由，所以openeds是这样的。 // 默认展开菜单的下标 openeds: ['/index', '/myMandate', '/commmonFunction'], 如果
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
最新发布
Dnn01的博客
05-14 293
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
elementui二级目录
06-07
要实现 ElementUI 中的二级目录，可以使用 Submenu 组件。具体步骤如下： 1. 使用 Menu 组件创建一级菜单，设置 mode 属性为 horizontal 或 vertical，创建多个 MenuItem 组件作为一级菜单项。 2. 在某个一级菜单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值