el-Dropdown踩坑1

最新推荐文章于 2024-04-23 08:30:00 发布
最新推荐文章于 2024-04-23 08:30:00 发布
阅读量540 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51002293/article/details/128357098
版权

代码中包含el-dropdown组件的div是和另一个同级div使用了v-if、v-else控制显示不同的页面

一切换到v-else的页面点击时都会报 Cannot read properties of null (reading 'setAttribute')

每次一点报错就会加一个 一直以为是点击事件的问题

最后查了下 elment下拉菜单的组件 以下三者缺一不可

el-dropdown
el-dropdown-menu
el-dropdown-item

在多个el-dropdown-item外层包了一个el-dropdown-menu 问题解决

codecodegirl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5取消下拉菜单,解决elementui中el-dropdown下拉菜单禁用项没有鼠标悬浮禁用样式...
weixin_32829465的博客
06-03 2153
问题描述饿了么ui中的下拉菜单组件，如果某个下拉菜单被我们禁用了以后，颜色会置灰，点击也没反应了。但是存在的问题就是，当鼠标悬浮到对应的禁用项上面的时候，我们会神奇的发现，居然没出现鼠标禁用的样式，官方给出的竟然还是一个箭头的样式。问题图如下：图是从官网上截取的其实并不影响产品的使用，但是有的时候我们想要优化一下效果。使其达到鼠标移入出现禁用样式，如下图，就是我们想要的效果禁用的时候鼠标悬浮时应为...
element el-dropdown下拉菜单显示问题
qq_40491518的博客
04-01 6770
element el-dropdown下拉菜单显示问题 最近写vue 发现公司一个项目有显示问题 搞的我很头疼 (如图) 我点击的是最下面()红框的下拉按钮 结果下拉菜单显示到上面去了,但是滚动后或者双击或者f12就是正常显示 本人也是查阅大堆资料, 感觉其他人没有遇到过这个问题 … 试过很多解决办法 清缓存 组件加key 点击时让滚动条滚动 点击时触发双击 等等 … 治标不治本 后来灵光一闪就解决了 下面贴下我的解决步骤 1 首先将官网Dropdown 的实例代码原封不动贴到 项目 发现还是
【el-dropdown】下拉样式异常报错并显示错位
最新发布
weixin_44634793的博客
04-23 460
问题：
elementUI组件el-dropdown - 踩坑篇
热门推荐
草巾冒小子的博客
04-19 4万+
效果图： 正确的代码如下： <div class="it-after" v-if=" resume.phone != ''"> <p class="it-telphone clamp1">{{resume.phone}}</p> <div class="btn3"><el-button type="primary" icon="el-i...
关于element-ui中的dropdown组件的两个坑
agua001的博客
08-07 2931
一、样式覆盖 一般组件样式覆盖可以使用嵌套写在某个盒子里面，但是dropdown不可以，我指的是下拉菜单项的样式，如图： 比如home页面 <style scoped lang="scss"> .home { .main { background: pink; } } // 写在外面 .personalCenter { /deep/ .el-dropdown-menu__item { width: 90px; text-align: center; } } &l
踩坑记9 vue3全屏、el-dropdown高度设置等
Alloom的博客
08-03 2318
2021.8.3 做一些界面样式切换的小功能。 坑28（css、选择器、统一间距）：目标是选择一个父元素的全部子元素，通过margin设置统一的左右间距。使用的选择器是element > *，其中'>'表示在element的子元素中选择，'*'表示选择所有元素，相关代码如下。 .setMenuBox{ display: flex; flex-direction: row; align-items: center; } .setMenuBox > *...
关于v-if与elementui-dropdownmenu配合显示时出现的bug
weixin_45634800的博客
10-21 586
今天工作上遇到一个检验bug，弄了一上午才搞好，公司原因，不能贴图，大致说下。 我们知道v-if可以控制组件的显示与隐藏，今天用v-if控制dropdown下拉菜单的显示与隐藏时，由于有两个判断条件，导致下拉菜单无法满足出现的条件，又或者条件没满足时又跳出来，debbugger一上午，从foreach改到for循环（foreach不支持break）改玩后，下拉却又显示不出来，最后在末尾加上显示的条件，即v-if＝"true"才行，当时这里没搞懂，因为默认v-if是true，当for循环条件全部满足显示下拉菜
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ng-multiselect-dropdown：多选下拉组件
01-30
入门产品特点具有单/多选择选项的下拉菜单绑定到任何自定义数据源搜索带有自定义占位符文本的项目极限选择选择/取消选择所有项目自定义主题安装npm install ng-multiselect-dropdown然后将其包含在您的模块中（请...
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
el-elementUI中的el-popover自动关闭问题
C_TopTopTop的博客
11-14 1637
el-popover 展示与关闭click控制，提交内容后自动关闭。
element-plus: dropdown + input的大坑
qq_29517595的博客
05-08 879
element-plus dropdown + input的大坑，dropdown-item阻断keydown
使用el-dropdown 下拉菜单时移入或点击元素都不显示对应下拉内容，并报错 this.triggerElm.setAttribute is not a function
lingliu0824的博客
08-15 6591
不具名插槽元素作为触发元素，当前报错为触发元素调用方法调用报错，考虑是否是触发元素获取错误。检查移入的组件和下拉显示的组件先后顺序，移入的组件必须在下拉显示的组件前面。查看el-dropdown组件源码，如果没有单独设置移入元素，则使用。...
element下拉菜单 command 传递多个值
mygoes
01-14 1818
element 的下拉菜单 command 传递多个值 核心代码： <el-dropdown-item :command="{row:boy, command:'1'}">传多个值</el-dropdown-item> 完整代码： <el-dropdown @command="handleCommand"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down e
elementui的el-table大坑
qq_26406269的博客
07-25 272
方案：1、最终还是用了el-dropdown-menu，但是无法改变菜单显示项逻辑，同时事件只支持修饰符为native的事件。3、el-input的双向绑定在里面会失效，所以不能使用，除非自己不用el-table。2、解决因为异步渲染不上的问题只能在异步数据有了才去渲染表格才会生效。4、表格的一些特性还不太合适，要么找个更好的ui框架，要么自己写。背景：在做后台管理时，需求是想在表格的表头里面点击进行筛选查询。2、el-dropdown-menu的传参和事件也会失效。问题：利用表头的header插槽，
“Cannot read properties of null(reading ‘parentNode‘)vue3运行报错 引入element-plus库
luciyana的博客
03-31 991
（注意，之前新生成vue项目的时候，跟着网上教程选的配置，但是要注意如果用element-ui的话就要使用vue2，vue3配套的是element-plus，所以是重新生成vue3项目再搬运，走了很多弯路，不过新手都正常啦）里面使用到了element-plus库的组件，但是没有加入引用，所以报错。本人刚刚开始接触前端，记录一下遇到的问题，希望可以帮助到你！不过我的表达不太标准，因为非常外行，欢迎大家批评指正啦！然后不要忘记在main.js中加入引用哦。就发现可以啦，耶耶耶！
element-ui 下拉菜单 el-dropdown-menu 组件 不能动态渲染数据怎么解决？
CodePrincess的博客
07-27 5510
你是否也在使用 element-ui 下拉菜单组件 el-dropdown-menu踩过坑，发现不能动态添加数据，是的话，可以看看以下内容，一些小技巧和个人心得体会~
el-input使用clearable，:title,MessageBox弹框外部关闭，el-Dropdown 下拉菜单详细举例，el-table的show-overflow-tooltip是什么？
qq_63322025的博客
06-16 1402
3.像某行文字过长，比如一个系统有少数民族使用的情况，虽然可以做单行文本强制不换行，省略号显示，但是为了交互性，最好我们加一个:title=“ （V-model绑定的内容）”，在鼠标摸上去的时候，会有详情以标签的形式显示出来。设置:show-overflow-tooltip="true"属性可以使单元格超出的内容自动折叠显示为...当鼠标移入时单元格的上方会弹出一个小tips来显示单元格得所有内容。解决方案是给蓝色部分的样式增加一个宽度，做一个限制即可，便可保证清楚标志在input的输入框内。
因为在el-dropdown-item中又嵌套了一层el-dropdown，内层的弹出框有点偏移，如何修改内层的el-dropdown-item而不干扰外层的el-dropdown-item
02-24
在el-dropdown-item中嵌套el-dropdown时，内层的弹出框偏移可能是由于样式冲突或层级问题导致的。为了修改内层的el-dropdown-item而不干扰外层的el-dropdown-item，可以尝试以下方法： 1. 使用scoped样式：在内层的el-dropdown-item中使用scoped样式，这样只会对当前组件生效，不会影响到外层的el-dropdown-item。可以通过设置内层el-dropdown-item的样式来调整弹出框的位置。 2. 修改内层弹出框的样式：通过给内层弹出框添加自定义类名或者选择器，然后在样式中修改该类名或选择器的样式，来调整弹出框的位置。这样只会对内层的el-dropdown-item生效，不会影响到外层的el-dropdown-item。 3. 调整层级关系：如果弹出框的位置偏移是由于层级问题导致的，可以尝试调整内层和外层el-dropdown-item的层级关系。可以通过设置内层el-dropdown-item的z-index属性来调整其在层级上的位置。 请注意，以上方法仅供参考，具体解决方案可能需要根据你的具体代码和样式情况进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值