element-ui 在el-row el-col 上@click失效问题

最新推荐文章于 2024-10-06 04:03:15 发布

置顶 JustDoIt521

最新推荐文章于 2024-10-06 04:03:15 发布

阅读量3.7k

点赞数

分类专栏： vue 文章标签： vue element-ui

本文链接：https://blog.csdn.net/qq_34119437/article/details/88354551

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在使用element-ui的时候发现使用饿了么自带的布局 el-row el-col时，如果想添加点击事件的时候，点击事件失效 @click失效。

经过查证，发现可以使用方法 @click.native代替@click即可

//无效
<el-row @click="goPersonInfo(item)"></el-row>  

//有效
<el-row @click.native="goPersonInfo(item)"></el-row>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JustDoIt521

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

element在el-row 或者 el-col 上使用@click失效

yimeichengxuyuan的博客

05-11

1665

使用element标签时注意！问题：写项目的时候使用element-ui中el-row时，发现直接用@click="fn"无法触发点击事件，在其内部或者外部加上自己写的html标签（如：div、span）是生效的。 //不生效代码 <el-row class="register" @click="goRegister()"> 还没有账号，去注册</el-row> 改正： el-row,el-col上的点击事件需要加.native,就可以实现点击事件 //生效 <el-

加载elementor时出现问题_elementUI 常见问题及解决办法

weixin_39685024的博客

12-20

1661

csselementUI input 的 placeholder样式.el-input__inner::-webkit-input-placeholder {line-height: 20px;}进度条背景颜色环形进度条.test svg > path:first-of-type{stroke: red !important;}条形进度条.el-progress .el-progress-...

1 条评论您还未登录，请先登录后发表或查看评论

火狐浏览器 el-table @row-click点击无响应

Start的小笔记

11-25

2744

@row-click="" 无法执行 console确无法执行，以为该方法未执行，使用alert发现会执行，使用 setTimeout 延迟可以解决问题。第二种方式是通过 event.preventDefault() 阻止默认事件。

VUE2常见问题以及解决方案汇总（不断更新中）

最新发布

tangdou369098655的博客

10-06

560

解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突，点击事件不生效（表格行点击事件和行内元素点击事件冲突）需要阻止事件冒泡，vue子组件传递数据给父组件，vue + elementui 使用dialog弹出框作为子组件，首次点击弹框可以显示，第二次点击弹框后赋值无法打开弹框，动态循环生成el-checkbox后数据更新但是页面不更新，无法取消勾选，点击无效问题

vue el-row el-col 的点击事件@click 无效问题

x_nweBorder01k的博客

02-21

2724

el-col是基于vue封装的组件，不支持原生事件的触发。无效： <el-col :span="4" @click="tagPlatform"> <img class="image_icon" src="@/assets/images/labelTag.png" alt=""/> <div class="image_text">标签平台</div> </el-col> 修改： <el-col :span=

element-ui 在el-row el-col 上@click失效问题解决

Shelly Long的博客

02-11

1346

在el-row、el-col上面添加点击事件@click无效，用原生@click.native代替@click即可 //无效 <el-row @click="getList(item)"></el-row> //有效 <el-row @click.native="getList(item)"></el-row> ...

关于使用elementUI 在el-row 或者 el-col 上使用@click失效的问题

ganjingjie的博客

07-29

542

只要在@click后面加native就可以了

el-row 如何绑定事件

09-06

- *1* *2* *3* [element在el-row 或者 el-col 上使用@click失效](https://blog.csdn.net/weixin_44813666/article/details/116657493)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{...

elment ui 组件bug总结

IT博客技术分享

04-04

3938

一、.element-ui dialog设置为点击弹窗以外的区域不关闭弹窗第一种: 在el-dialog标签中添加:close-on-click-modal="false"即可 <el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容 </el-dialog> 第二种:全局设置在mian.js里面： import Elem.

elementui el-dialog的一个小坑

lj872224的博客

03-13

9586

<el-dialog title="编辑库存" :visible.sync="dialogFormVisible"> <div style="border-bottom:1px solid #E6E6E6;width:100%;margin-top:-20px;"></div> ...

elementUI 在el-row 或者 el-col 上使用@click失效

life_stranded的博客

05-12

894

今天在使用element-ui的时候，发现不管我在el-row、el-col还是el-radio添加点击事件@click="handleClick"，都无法触发点击事件，经过一番努力后提供两种解决思路： 1.在外面添加一个Div，然后在Div上添加点击事件但是这种方法会显得十分冗余，下面介绍另外一种方法 2.使用click.native .native - 主要是给自定义的组件添加原...

【Element】el-button点击事件失效

m0_61049675的博客

01-29

1667

原因：由于el-button添加样式，例如float，position等等，浮动样式图层跟标准页面不在同一个层面上，因此无法点击。

ElementUI中绑定@click失效问题

qq_55856928的博客

05-07

543

由于Vue的@click是封装的，所以在elementui的组件里需要加上.native属性，这时如果用的循环渲染的radio组件，可能会看到这样的情况。只需把prevent去掉或换成.stop即可（stop阻止点击事件冒泡到父组件）@click.native.prevent条件下。会丢失elementui的原有效果。

elementui中@row-click 和 @row-dbclick 不能同时使用的解决思路

qq_18945257的博客

10-16

2967

在 Element UI 中，@row-click和@row-dbclick是表格组件（el-table）中用于监听行点击和双击事件的两个事件属性。根据 Element UI 的文档，确实不能同时使用这两个事件属性。

element-ui表格的row与col添加的click没有作用（ .native）

mineblogjw的博客

09-22

2863

业务：根据时间段进行查询数据。实现：通过点击不同的日期，获取到对应的时间传值给日历挂机，再查询。 Bug：时间上的点击事件没有触发。解决：在click后面加上 .native 。图示问题。后续还有处理时间的方法（可看）。 <el-col :span="8"> <div class="queryBtn" style="border: 1px sol...

为el-col、el-row添加点击事件

superpan的博客

08-20

5465

为el-col、el-row添加点击事件要为el-col和el-row添加点击事件，不能用常用的v-on:click=”function()”或@click=”function()”添加点击事件，应该使用v-on:click.native="function()"或@click=”function()”添加点击事件 ...

Element u中el-select、el-row、el-dropdown-item等等标签添加@click事件无效解决方法

qq_42483780的博客

04-12

1050

如下： <el-row @click.native="handle"></el-row> //js handle(){ console.log('我生效啦') } 重点：在@click后加上.native 原因：vue封装@click这些方法时阻止了原生的DOM事件，而native就是释放DOM原生事件。

Vue的click事件在html中失效问题

wen13727561564的博客

05-10

1487

这个问题也是困扰了我一个多小时，一开始以为vue.js引入不成功，运行后打开Vue调试器也成功，所以Vue是引入成功的。又检查了vue版本是不是2，也没问题。这样即可正常触发vue.methods中定义的方法了。

如何解决在element-ui中el-row和el-col点击事件无法生效的方案

zycome的博客

11-23

1283

例如：在写element-ui时，遇到el-row和el-col无法帮定click事件或者事件不生效，代码如下。

Element-UI弹性布局教程：使用el-row和el-col实现自动换行

在本教程中，我们将聚焦于 `el-row` 组件，它是 Element-UI 实现灵活分栏布局的关键组件。 `el-row` 和 `el-col` 是 Element-UI 中用于栅格系统的两个核心组件。栅格系统是网页设计中常用的布局方式，通过将页面...