el-dropdown在el-table-column中使用无效的解决方法以及事件的触发

最新推荐文章于 2024-03-21 14:43:00 发布
最新推荐文章于 2024-03-21 14:43:00 发布
阅读量1.8k 收藏
点赞数 2
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wangbiaoge/article/details/104649963
版权

在el-table-column下加入<template slot-scope="scope">

 

 

click事件的触发 需要加上.native

村长家的养鸡场
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
django-admin-list-filter-dropdown：在Django管理员列表过滤器中使用下拉菜单
02-05
django-admin-list-filter-dropdown 呈现为下拉列表的Django管理过滤器实现。 如果要在Django admin中过滤的字段具有十个以上的值，则过滤侧边栏会变得很长，混乱且难以使用。 此应用程序包含DropdownFilter类，该类在过滤侧边栏中显示为下拉列表，以避免出现此问题。 用法 安装： pip install django-admin-list-filter-dropdown 在settings.py启用： INSTALLED_APPS = ( ... ' django_admin_listfilter_dropdown
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
解决：element-ui 下拉菜单el-dropdown-item添加点击事件@click无效
最新发布
weixin_58622844的博客
03-21 485
element-ui 下拉菜单el-dropdown-item添加点击事件@click无效
使用element的表格，el-table-column中使用slot加v-if出现的渲染混乱失效
m0_49623851的博客
02-06 1781
使用element的表格，el-table-column中使用slot加v-if出现的渲染混乱失效
Element el-dropdown 事件
林中明月间丶
06-20 2672
这里我需要点击下拉选择值后，既要得到下拉里面的值 也要得到这一行数据的值。设置trigger="click" 就可以加点击事件。我这里是结合el-table一起使用。
el-table 中 el-table-column 使用slot插槽 v-if导致不显示问题
ahead_he的博客
08-19 3831
今天碰到了el-table 中 el-table-column 使用slot插槽 v-if导致不显示，经过研究是细节上的问题所导致。
el-table嵌套el-dropdown实现动态下拉菜单操作
weixin_44135963的博客
12-07 4740
el-table嵌套el-dropdown实现动态下拉菜单操作
给el-table的表头某列添加自定义el-dropdown，点击无效的问题
树上骑个猴的博客
10-23 1414
slot的方式： <el-table-column prop="policyNo" label="号码" :align="columnAlign"> <template slot="header"> <el-dropdown trigger="hover" @command="handleCommand">
vue---el-dropdown在el-table中无效的解决方法
maidu_xbd的博客
11-26 3089
加入【<templateslot-scope="scope">...</template>】
elementUI中 el-Switch 在 el-table-column 中点击无效的问题
最爱喝怡宝的博客
03-24 4094
在写项目时发现，就算绑定了 v-model ，switch开关也是不会生效，下面这个方法可以解决 <el-table-column> <!-- slot-scope="scope" 用来解决不生效的问题 --> <!-- scope.row.show 这里的 row 指的是 table绑定的data的数据 --> <template slot-scope="scope"> <el-swit
下拉框、或者el-table中绑定点击、鼠标滑入滑出事件不生效
m0_61676604的博客
05-25 559
解决办法：在事件后面添加.native修饰符即可，这样可把事件绑定到组件的根元素上。如：＠ｃｌｉｃｋ．ｎａｔｉｖｅ、
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ng-multiselect-dropdown：多选下拉组件
01-30
入门产品特点具有单/多选择选项的下拉菜单绑定到任何自定义数据源搜索带有自定义占位符文本的项目极限选择选择/取消选择所有项目自定义主题安装npm install ng-multiselect-dropdown然后将其包含在您的模块中（请...
解决Element-UI 在table组件el-table-column中使用v-if的问题
lucasxt的博客
09-30 1万+
**场景：**切换页签时动态改变表格展示列以及对应数据项 **使用方式：**通过v-if条件判断控制显隐 **问题：**导致表头乱飞、错位，明明数据项有值，但是通过props获取值在页面上没有显示出来 **分析原因：**vue在渲染元素时，处于效率考虑， 会尽量地复用已有的元素而非重新渲染，导致元素间相互影响，不能正常渲染 解决方案： 用 key 管理可复用的元素 只需添加一个具有唯一值的 key attribute 表名“该元素是完全独立的，不要复用它” <el-table-column prop=
table行中的el-dropdown点击某项获取行的信息
lucky_zouzou的博客
04-13 1780
在使用el-table时，操作列需要加一个下拉菜单对选中行进行操作。 使用el-dropdown, element官网上是在组件加@command方法，但是像官网这样只能拿到点击项的key没法拿到表格当前行的信息，可以使用以下方式： //官网 @command="handleCommand" //解决方式 @command="(command) => { clickDropDown(command, row); } " 示例： <el-ta
el-table操作栏添加el-dropdown获取当前行的数据
Gpointy的博客
11-16 291
点击子合同获取到当前行的id。
vue使用el-table在el-table-column下使用v-if改变数据不响应
m0_59290344的博客
09-26 676
vue使用el-table在el-table-column下使用v-if改变数据不响应
工作240：修改省略号
歌谣的博客
12-13 192
<el-table-column :show-overflow-tooltip="true" v-for="(column, index) in columns" :key="index" :type="column.type" :prop="column.prop" :label="column.label" :width="column.width" :...
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...
el-table右键行出现el-dropdown
07-08
要在 el-table 中实现右键行出现 el-dropdown 下拉菜单，你可以按照以下步骤进行操作： 1. 在 el-table 中的每一行添加一个自定义的右键菜单触发事件。可以使用 el-row 的 @contextmenu 事件来实现这一点。例如： ```html <el-table :data="tableData"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-row @contextmenu.native.prevent="handleContextMenu(scope.row)"> <el-button type="text">右键菜单</el-button> </el-row> </template> </el-table-column> </el-table> ``` 请注意，这里使用了 `@contextmenu.native.prevent` 来阻止默认的右键菜单事件，并调用 `handleContextMenu` 方法。 2. 在 Vue 组件的 methods 中定义 handleContextMenu 方法来处理右键菜单事件。该方法将接收当前行的数据对象作为参数。你可以在该方法中打开 el-dropdown，并根据需要添加下拉菜单项。例如： ```html <template> <div> <el-dropdown ref="dropdown" trigger="contextmenu"> <span class="el-dropdown-link"> 右键菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>操作1</el-dropdown-item> <el-dropdown-item>操作2</el-dropdown-item> <el-dropdown-item>操作3</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </template> <script> export default { methods: { handleContextMenu(row) { // 在这里打开 el-dropdown this.$refs.dropdown.$refs.reference.$el.click(); } } } </script> ``` 在这个示例中，我们使用了 `el-dropdown` 组件来创建下拉菜单，并在 `handleContextMenu` 方法中通过点击 el-dropdown 的引用元素来打开下拉菜单。 这样，当用户在 el-table 中的某一行上右键点击时，就会触发 `handleContextMenu` 方法，并打开 el-dropdown 下拉菜单。你可以根据需要在 `el-dropdown-menu` 中添加自定义的下拉菜单项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值