记一次el-checkbox包裹一层div,点击div勾选复选框,点击复选框却没反应的bug
<div
class="account-item"
v-for="item in accountList"
:key="item.id"
:class="[
{ 'is-select-mode': isSelectMode },
{ 'is-select': item.isSelect }
]"
@click="selectItemClick(item)"
>
<el-checkbox
v-if="isSelectMode"
v-model="item.isSelect"
label=""
size="large"
@click.stop="stopEvent"
/>
<svg-icon class="svg-icon" icon="icon-custom"></svg-icon>
<div class="account-content">
<div class="name">{{ item.name }}</div>
<div class="phone">{{ item.phone }}</div>
<div class="email">{{ item.email }}</div>
<div class="address">{{ item.address }}</div>
</div>
</div>
点击div时,点击div取消,勾选复选框是正常的,但是点击复选框却失效,这是由于冒泡,相当于改了两次checked的值,造成值没变,只需要给checkbox的点击事件取消冒泡就可以了。

记一次el-checkbox包裹一层div,点击div勾选复选框,点击复选框却没反应的bug的更多相关文章
- checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中
checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...
- 全选或者单选checkbox的值动态添加到div
图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- css 父div如何包裹带有float属性的子div,float子div如何撑开父div
来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...
- JaveWeb 公司项目(2)----- 类模态窗口显示DIV并将DIV放置在屏幕正中间
上一篇博客写的是通过隐藏显示进行div的替换,接下来需要在原有的div前添加一个div,进行表单的提交,需要将div放置在正中间,然后类似C#中的模态窗口,在进行完新弹出的div操作之后,才可以进行下 ...
- jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏
<!doctype html><html> <head> <meta charset="utf-8"> <title>j ...
- 点击div 跳转并通过URL传参
点击div前要先给div绑定要传的参数: //给panel绑定自定义属性,方便在跳转时传带参数,键/值对排列 panel.attr("user_age",user_age); pa ...
- 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
- 点击div折叠
<!doctype html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 点击div全选中再点击取消全选div里面的文字
想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...
- $('div a') 与$('div>a'),.div+.div2与.div~.div2
$('div a'):div标签下所有层次a元素的jquery对象 $('div>a'):div标签下子元素层次a元素的jquery对象 <body> <div class=' ...
随机推荐
- 前端优化之路:git commit 校验拦截
[前言] 前面在git分支规范那篇文章里,介绍了commit提交规范,如下图 但是想要做到高效落地执行,就需要做些别的功课,先展示下成果图 没错,对不符合规范的commit进行了拦截,符合才可以成功提 ...
- 2024年 为什么不建议新人学习ABAP
引言 每个应届生都希望自己有良好的职业发展,当他们发现前路难通时,便会寻找更好的出路. "转码"曾经是个很火热的话题.在互联网行业高速发展的年代,转行学代码,入职大厂,升职加薪,是 ...
- bash shell笔记整理——which和whereis命令
which和whereis命令作用 which:显示给定命令所在路径 whereis:相比which更完善,显示命令路径.man文件路径(如果有).源代码路径 which语法 which [optio ...
- svn、git服务器配置进程方式网关不生效常见处理方法
过华企盾DSC防泄密系统配置svn或者git服务器的时候,网关不生效如何解决? 1.先在cmd中运行一下命令netstat -ano|findstr "8080" 找到svn.gi ...
- CodeForces 1141F2 贪心 离散化
CodeForces 1141F2 贪心 离散化 题意 给定一个序列,要求我们找出最多数量的不相交区间,每个区间和都相等. 思路 一开始没有头绪,不过看到 \(n \le 1500\) 后想到可以把所 ...
- CANN开发实践:4个DVPP内存问题的典型案例解读
摘要:由于DVPP媒体数据处理功能对存放输入.输出数据的内存有更高的要求(例如,内存首地址128字节对齐),因此需调用专用的内存申请接口,那么本期就分享几个关于DVPP内存问题的典型案例,并给出原因分 ...
- 详解Apache Sentry->Ranger平滑升级方案
摘要:本文主要探讨如何平滑解决sentry到ranger升级过程中的权限迁移问题. 本文分享自华为云社区<[平滑上云]Apache Sentry->Ranger平滑升级方案>,作者: ...
- 你的Parquet该升级了:IOException: totalValueCount == 0问题定位之旅
摘要:使用Spark SQL进行ETL任务,在读取某张表的时候报错:"IOException: totalValueCount == 0",但该表在写入时,并没有什么异常. 本文分 ...
- VS Code摸鱼神器,让你快速开发AI模型
摘要:ModelArts VS Code插件一键接入云上开发环境介绍及操作指导 对于习惯于使用本地VS Code IDE的开发者,受限于本地资源,采用本地开发加云上调测的远程开发方式不失为一种更好的选 ...
- 当你运行npm run命令时,会发生什么?
摘要:今天我们来聊一聊运行npm run命令之后会发生什么. 本文分享自华为云社区<运行npm run命令的时候会发生什么?>,作者:gentle_zhou . 先前发了一篇"运 ...