element el-dropdown下拉菜单显示问题

最新推荐文章于 2024-05-31 14:52:29 发布
最新推荐文章于 2024-05-31 14:52:29 发布
阅读量6.7k 收藏 2
点赞数 2
文章标签： vue js npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40491518/article/details/115367571
版权
element el-dropdown下拉菜单显示问题最近写vue 发现公司一个项目有显示问题 搞的我很头疼 (如图)我点击的是最下面()红框的下拉按钮 结果下拉菜单显示到上面去了,但是滚动后或者双击或者f12就是正常显示 本人也是查阅大堆资料, 感觉其他人没有遇到过这个问题 …试过很多解决办法 清缓存 组件加key 点击时让滚动条滚动 点击时触发双击 等等 … 治标不治本后来灵光一闪就解决了下面贴下我的解决步骤1 首先将官网Dropdown 的实例代码原封不动贴到 项目 发现还是
摘要由CSDN通过智能技术生成

element el-dropdown下拉菜单显示问题

最近写vue 发现公司一个项目有显示问题 搞的我很头疼 (如图)
在这里插入图片描述
我点击的是最下面(红框)的下拉按钮 结果下拉菜单显示到上面去了,但是滚动后或者双击或者f12就是正常显示 本人也是查阅大堆资料, 感觉其他人没有遇到过这个问题 …

试过很多解决办法 清缓存 组件加key 点击时让滚动条滚动 点击时触发双击 等等 … 治标不治本
后来灵光一闪就解决了

下面贴下我的解决步骤

1 首先将官网Dropdown 的实例代码原封不动贴到 项目 发现还是有这个问题

2 然后查看项目的package.json文件 公司项目用的2.7.0版本
在这里插入图片描述
3 我在element 官网选择最近的一个版本 果不其然

最低0.47元/天 解锁文章
不会编程的黄同学
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
elementui 弹窗 显示详细信息_如何让Element UI的Message消息提示每次只弹出一个
weixin_42715608的博客
12-24 3623
前言Element UI的Message消息提示是点击一次触发一次的。在开发的时候经常会作为一些校验提示，但是公司的测试人员在进行测试时会一直点，然后就会出现如下图的情况。虽然客户使用的时候一般来说不会出现这种情况(毕竟客户不会闲着没事一直点点点，而且就算出现了也只是不太好看，对功能什么的都没什么影响)，但既然测试提出来了那还是要解决的。最开始查了下Element UI的官方文档，发现确实没提供只...
el-dropdown 两个以上el-dropdown互相切换时，第一次active只切换，不展示下拉框，第二次再点击，才展示下拉框...
weixin_30856725的博客
12-28 696
1.可以在el-dropdown上设置蒙层使第一次点击时，点击触发在蒙层上，不触发el-dropdown点击事件。 <template> <div id="test"> <div class="train-tab__item" @click="tabFeatureList(0)" style="min-width: 135px;he...
element-plus下拉选择select只显示最后一个解决办法
bird__yuan的博客
10-09 568
在用到element-plus下拉选择select时候会遇到无论怎么选择都选中的是最后一个
element-plus 使el-dropdown只显示当前选择节点
weixin_43891869的博客
05-31 552
这样，每次点击下拉菜单的时候，只有当前的下拉菜单会被显示，其他的下拉菜单都会被隐藏。
解决Vue+Element UI使用el-dropdown(下拉菜单)国际化时菜单label信息没有刷新的情况
cdtaogang's blog
08-07 943
在默认中文时，点击布局大小下拉菜单正常显示中文，此时切换至英文时，再次点击下拉菜单，还是中文。很简单通用的处理就是转换下思路，在模板中使用。
elementUI-Dropdown多级菜单，鼠标移上后，前一级菜单消失（不显示）
qq_41714508的博客
01-04 1093
【代码】elementUI-Dropdown多级菜单，鼠标移上后，前一级菜单消失（不显示）
el-table的操作列中使用下拉菜单，且下拉菜单不插入body
扮老虎的猪
03-08 2601
el-table 单元格中使用el-dropdown，且不插入到body中，此时，打开的下拉框被遮挡
Element Dropdown下拉菜单的使用方法
10-15
在 Element 中，Dropdown（下拉菜单）是一个重要的组件，它提供了丰富的交互式菜单选项，通常用于显示更多操作或功能。在本文中，我们将深入探讨 Element Dropdown 的使用方法。 ### 基础用法 要创建一个基础的 ...
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-select组件通常用于创建一个可选列表，用户可以从中选择一个或多个选项。当el-select的选项列表（el-...
【elementplus】body使用zoom导致el-dropdown组件的下拉菜单错位的解决方案
bbt953的博客
07-12 2331
body使用zoom导致el-dropdown组件的下拉菜单错位的解决方案
elementUI：el-menu 对于同一级的节点，每次只能展开一个
qq_41814311的博客
04-02 4165
项目场景： 项目需求左侧菜单栏，当选中当前菜单后，需要关闭其他菜单选项。 展示效果 原因分析： 因为 elementUI中 el-menu 标签中 unique-opened属性 默认为 false ，表示全展开。 解决方案： 将 unique-opened 设置为 true <el-menu :default-active="activeMenu" :collapse="isCollapse" :text-color="varia
Dropdown 下拉框（el-dropdown-menu）内容过长显示‘...’ 鼠标悬浮显示全部
migexiaoliang的博客
08-10 2806
使用element的Dropdown 下拉框（el-dropdown-menu）内容过长显示‘…’ 鼠标悬浮显示全部。有时候内容太长导致文字换行与其它文字折叠展示
Vue-elementUI 表格里动态添加行操作按钮，并且是el-dropdown 下拉框，给el-dropdown绑定点击事件
qq_19808621的博客
04-18 1万+
Vue-elementUI 表格里动态添加行操作按钮，并且是el-dropdown 下拉框，给el-dropdown绑定点击事件 一共两种方法: 一、直接给el-dropdown-item 绑定点击事件。这里需要用 @click.native=" name" 这样绑定才会有效。 <el-table :data=“orderAcceptTableData” stripe border hei...
el-dropdown的显示问题
java_xxxx的博客
10-24 1万+
最近项目中用到了el-dropdown，出现的问题是，例如有三个选项，全部诗词曲，唐诗、宋词、元曲。当我点击唐诗的时候，得到所有唐诗的数据，但是该标签还是显示“全部诗词曲&quot;。 解决方式1：在el-dropdown标签内添加span，用来显示选中项。当除法command事件的时候，js中通过拿到的id，再得到该id对应的名字，然后将该名字绑定到droColumnName（一个变量名，可随意取值），然...
el-Dropdown踩坑1
weixin_51002293的博客
12-17 548
一切换到v-else的页面点击时都会报 Cannot read properties of null (reading 'setAttribute')代码中包含el-dropdown组件的div是和另一个同级div使用了v-if、v-else控制显示不同的页面。在多个el-dropdown-item外层包了一个el-dropdown-menu 问题解决。最后查了下 elment下拉菜单的组件 以下三者缺一不可。每次一点报错就会加一个 一直以为是点击事件的问题。
element-ui多次弹出message消息提示，仅显示一个
一梦成回忆
03-16 2092
项目中最常用的UI框架就是element-ui，经常在点击操作按钮时候多次点击上一个弹窗未消失，下一个又出现，类似于ant-vue里面提供了 this.$message.destroy()方法，能够销毁。 但是在饿了么里面是不存在的，只能对此重写处理，代码如下 import { Message } from 'element-ui' let messageInstance = null const resetMessage = options => { if (messa...
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-plus el-dropdown 实现多级下拉菜单
最新发布
06-05
element-plus 中的 el-dropdown 实现多级下拉菜单的方法如下： 1. 首先需要嵌套多个 el-dropdown-menu 组件，每个 el-dropdown-menu 代表一个下拉菜单的级别，同时需要为每个 el-dropdown-menu 设置唯一的 ref 标识。 2. 接着需要在每个 el-dropdown-menu 中定义需要展示的菜单项，使用 el-dropdown-item 组件实现。 3. 在每个 el-dropdown-menu 上添加 @command 事件监听，当菜单项被点击时，触发该事件，并将所选中的菜单项作为参数传递给事件处理函数。 4. 在事件处理函数中，判断当前点击的菜单项是否有子菜单需要展示，如果有，则通过 ref 获取对应的子菜单 el-dropdown-menu 组件，并使用其 show 方法显示该子菜单。 以下是示例代码： ``` <template> <el-dropdown> <span class="el-dropdown-link">多级下拉菜单</span> <el-dropdown-menu ref="menu1"> <el-dropdown-item @command="handleCommand">选项1</el-dropdown-item> <el-dropdown-item @command="handleCommand">选项2</el-dropdown-item> <el-dropdown-item @command="handleCommand">选项3</el-dropdown-item> <el-dropdown-item @command="handleCommand">选项4</el-dropdown-item> <el-dropdown-item @command="handleCommand">选项5</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <script> export default { methods: { handleCommand(command) { if (command === '选项1') { const menu2 = this.$refs.menu2; menu2.show(); } else if (command === '选项2') { // do something } else if (command === '选项3') { // do something } else if (command === '选项4') { // do something } else if (command === '选项5') { // do something } } } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值