element ui中el-radio和el-checkbox点击触发两次事件处理方法

news/2024/7/10 2:46:08 标签: vue, elementui

参考:https://blog.csdn.net/ChengShengMeJia/article/details/108147612

找了半天原因,后来发现是el-radio被封装多层,根元素不是input,
我认为是由于事件冒泡机制导致的,因为根元素是label,click事件绑定到了label上。
因为点击label的时候,事件冒泡一次,同时会触发关联的input的change事件,导致事再次触发事件。

解决方案

  <el-radio-group v-model="radio" @click.native="SkipProgress($event)">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>


	methods:{
		Skipprogress(e){
			// 因为原生click事件会执行两次,第一次在label标签上,第二次在input标签上,故此处理
			if (e.target.tagName === 'INPUT') return;
		}
	}

个人使用

<h4>选择播放站点</h4>
<div class="content_bottom">
  <div
    class="content_bottom_item"
    v-for="(item, index) in playPoint"
    :key="index"
    @click="pointDivClick(index)"
  >
    <el-checkbox
      :label="item"
      v-model="point[index]"
      size="medium"
      style="color: #bbbb; font-size: 25px; font-weight: 900"
      @click.native="SkipProgress($event)"
    ></el-checkbox>
  </div>
</div>



 // 防止点击事件冒泡两次
 SkipProgress(e){
   if (e.target.tagName === 'INPUT') return;
 },

http://www.niftyadmin.cn/n/1691243.html

相关文章

5w2h原则指的是什么_营销方案撰写一学就会的5W2H原则

大学未毕业便进入营销行业&#xff0c;在销售一线&#xff0c;不可避免的核心工作之一便是与方案撰写打交道&#xff0c;后来&#xff0c;机缘巧合&#xff0c;入职职能部门&#xff0c;从单纯写方案的人&#xff0c;变成了又写又看的人&#xff0c;每年看的方案不下大几百份&a…

StringRedisTemplate操作redis数据

原文链接&#xff1a;https://www.cnblogs.com/java-gcs/p/11024530.html StringRedisTemplate与RedisTemplate区别点 两者的关系是StringRedisTemplate继承RedisTemplate。两者的数据是不共通的&#xff1b;也就是说StringRedisTemplate只能管理StringRedisTemplate里面的数…

java实训项目_JAVA学习那些事:好比是打怪升级,修炼升仙的过程

对于学习任何新的知识来说&#xff0c;都有自学和教学(学校教学)两种学习方式。教学方式肯定简单&#xff0c;只要交学费按照老师的章程和计划来学习。针对想自学JAVA的人来说&#xff0c;这个肯定有些难度&#xff0c;毕竟JAVA是一门思维逻辑强的专业技能知识。不过你的好学心…

datagrid jeesite 子表显示到datagrid_基于 Angular Material 的 Data Grid 设计实现

自 Extensions 组件库发布以来&#xff0c;Data Grid 成为了使用及咨询最多的组件。最开始 Data Grid 的设计非常简陋&#xff0c;经过一番重构&#xff0c;组件质量已经有了质的提升。Extensions 组件库&#xff1a;https://github.com/ng-matero/extensionsData Grid 示例&am…

python案例演示_Python之time模块案例演示

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼案例01: 2008年8月8日20:08:08 往后88,888,888秒是哪天&#xff1f;星期几&#xff1f;日期->时间戳(浮点数)->可以做数学运算演示&#xff1a;import time# 构造日期的元组&#xff0c;元组必须是9位标准的tuple01 (2008, …

SQL查询出来的时间和数据库存的时间不一致问题解决

参考一&#xff1a;https://blog.csdn.net/Tony_wang000/article/details/105514640?utm_mediumdistribute.pc_relevant.none-task-blog-baidujs_title-0&spm1001.2101.3001.4242 参考二&#xff1a;https://blog.csdn.net/q283614346/article/details/90737288 原因一&a…

Base64转MultipartFile

最近做了一个h5人脸采集demo&#xff0c;后端调用百度人脸检测API对图片质量进行把控&#xff0c;图片参数可以是base64类型或者URL形式。前端把图片压缩然后转为base64传回后端&#xff0c;后端进行质量检测合格后把base64转为MultipartFile上传到文件服务器。 Base64转Multi…

Java实现使用Modbus4j+seroUtils读取Mudbus RTU/ASCII Over TCP/IP连接设备数据

使用Modbus4jseroUtils读取风速风向仪数据&#xff0c;现有设备IP&#xff0c;端口号&#xff0c;从机地址&#xff0c;寄存器读取开始地址&#xff0c;读取的寄存器数量。没有上述jar包可以自行搜索&#xff0c;网上资源挺多 /*** author chengy*/ Component public class Mod…