Vue 解决el-dropdown在table中与el-button配合使用不展示的问题

已于 2023-04-24 16:06:34 修改
阅读量1.6k 收藏
点赞数 1
文章标签： vue.js 前端 javascript
于 2023-04-24 11:17:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CCC_chtt/article/details/130338542
版权
在Vue项目的el-table组件里，遇到一个bug，el-button触发的el-dropdown无法显示。问题源于展示优先级，通过查看源码确认后，解决方案是将el-button替换为span，这样就能正确显示dropdown了。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在今天的项目开发中，遇到一个令人头疼的bug，问题分析如下：
在el-table中,在插槽中设置了el-dropdown，由el-button触发
在这里插入图片描述
但是在页面中，该提示不显示（也不是vif的原因），后续观察了项目源码，发现el-button还是会遇到展示优先级的问题。解决此类问题，无需多余的操作，只需把button换成span即可，如图所示：
在这里插入图片描述
结果就可以展示啦
在这里插入图片描述

CCT丶Blue
关注
element-plus中el-button的icon图标不显示
vue+iview 动态渲染表格（vue.js结合iview插件）
12-07 1万+
element-plus官网 <el-button type="primary" :icon="Edit" circle></el-button>的新写法不能用，在icon的示例里面方法可以使用。 <el-button type="primary"> <el-icon style="vertical-align: middle;"> <search /> </el-icon> <span...
关于Element UI在表格中添加Button不显示的问题（已解决）
weixin_55797565的博客
03-30 9560
Element UI采用了外部引入的方式： <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"
vue学习笔记9
最新发布
2302_81119658的博客
02-13 682
基本结构样式，使用el-card 组件 props 定制标题默认插槽 default 定制内容主体具名插槽 extra 定制头部右侧额外的按钮 文章管理测试 文章分类渲染 封装API - 请求获取表格数据 页面中调用接口，获取数据存储 el-table 表格动态渲染 el-table 表格 loading 效果 定义变量，v-loading绑定 const loading = ref(false)<el-table v-loading="loading">cons
vue2项目el-table中嵌套el-dropdown, 下拉菜单事件不响应
Cocoon_Xu的博客
04-19 995
最近在做项目改造，发现之前element-plus中正常使用el-dropdown，在element中没响应，查了官方文档了解到两个版本dropdown的事件不一样。在element中，使用common事件感觉有点绕弯子，所以我用了.native 修饰符的方式实现了下拉菜单的事件触发。.native - 监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。下面分别看一下两个版本的写法。
给el-table的表头某列添加自定义el-dropdown，点击无效的问题
树上骑个猴的博客
10-23 1582
slot的方式： <el-table-column prop="policyNo" label="号码" :align="columnAlign"> <template slot="header"> <el-dropdown trigger="hover" @command="handleCommand">
element-plus el-dropdown下拉不显示
qq_45780616的博客
07-24 1179
解决：el-dropdown-menu元素外添加<template #dropdown>
vue---el-dropdown在el-table中无效的解决方法
maidu_xbd的博客
11-26 3342
加入【<templateslot-scope="scope">...</template>】
element UI对el-dropdown的二次封装（三级下拉框）
weixin_43238931的博客
11-09 1337
<template> <el-dropdown trigger="click" :hide-on-click="true"> <el-button> <svg-icon :icon-class="iconClass" class-name="icon-svg" /> <span>{{ text }}</span> <i class="el-
element-ui二次封装(下拉菜单el-dropdown)
gongliming_qd的博客
01-08 1988
样式效果 效果1 效果2 效果一组件调用 <template> <div> <div v-for="item in tableArr" :key="item"> <Dropdown :propObj="item" @change="menuChange" :selectData="menuSelect.menuSelectData" :buttonIcon="menuSel
el-table右键行出现el-dropdown
07-08
要在 el-table 中实现右键行出现 el-dropdown 下拉菜单，你可以按照以下步骤进行操作： 1. 在 el-table 中的每一行添加一个自定义的右键菜单触发事件。可以使用 el-row 的 @contextmenu 事件来实现这一点。例如： ...
026：vue中el-progress逆向倒计时方式显示_el-progress逆时针(1)
2401_84411072的博客
04-27 1052
在vue项目开发中，涉及到流量的使用情况，采用el-progress进度条来显示目前流量的状态。由于流量是越来越少，所以要采用逆向的方式来显示出来。el-progress示例中都是正向的方式，我们这里是做了一小部分修改，达到了想要的效果，如图。在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。
使用el-tree封装一个权限管理的小功能
weixin_40923558的博客
06-05 578
使用el-tree封装一个权限管理的小功能
el-popover或el-popconfirm中button不展示问题
渣成沙
07-12 1001
vue3在使用Element-plus 2.X时，出现el-popover或el-popconfirm中button不展示问题。第一种错误原因：el-button没有添加。第二种错误方式： 添加。
Vue | Element ＜el-button type=“warning“ :icon=“Star“ circle /＞ 图标不显示问题
m0_59074557的博客
03-07 970
解释：官方文档绑定了import的内容，没有import所以无法显示。
element-ui dropdown 元素太多，显示不开，如何解决
学习笔记
11-21 2350
在用element-ui的dropdown组件来做一个选项选择的入口时，由于系数过多，而它又就是纵向一列显示的，就导致它的列表撑出了画面外，像这样：所以就需要解决一下，解决的办法也很简单，就是定义一个样式让它原来的布局变一下，改成可横向排列的。
vue页面或者网页全屏后，el-dropdown和el-tooltip无法显示
WOMENshiNIDE的博客
05-15 1701
【代码】vue页面或者网页全屏后，el-dropdown和el-tooltip无法显示。
使用el-dropdown 下拉菜单时移入或点击元素都不显示对应下拉内容，并报错 this.triggerElm.setAttribute is not a function
lingliu0824的博客
08-15 7601
不具名插槽元素作为触发元素，当前报错为触发元素调用方法调用报错，考虑是否是触发元素获取错误。检查移入的组件和下拉显示的组件先后顺序，移入的组件必须在下拉显示的组件前面。查看el-dropdown组件源码，如果没有单独设置移入元素，则使用。...
全屏下，elelmentplus的el-dropdown和el-tooltip无法显示
WOMENshiNIDE的博客
07-12 912
在官方给出的el-tooltip中有一个属性为。的官方文档中未给出此属性，但使用后依然生效，将其值设置为false即可。
el-table中设置三个按钮点击不同的按钮改变这条数据状态栏状态的显示
weixin_42599558的博客
01-16 1015
在 el-table 中，可以在每一行的模板中添加三个按钮，给每个按钮绑定不同的点击事件，在事件中通过修改该行数据的状态字段来改变状态栏的显示。具体实现可以参考以下代码： <templateslot-scope="scope"> <el-button @click="changeStatus(scope.row, 'status1')">状态1</el-butto...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值