<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的更多相关文章

  1. checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  2. 全选或者单选checkbox的值动态添加到div

    图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  3. css 父div如何包裹带有float属性的子div,float子div如何撑开父div

    来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...

  4. JaveWeb 公司项目(2)----- 类模态窗口显示DIV并将DIV放置在屏幕正中间

    上一篇博客写的是通过隐藏显示进行div的替换,接下来需要在原有的div前添加一个div,进行表单的提交,需要将div放置在正中间,然后类似C#中的模态窗口,在进行完新弹出的div操作之后,才可以进行下 ...

  5. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  6. 点击div 跳转并通过URL传参

    点击div前要先给div绑定要传的参数: //给panel绑定自定义属性,方便在跳转时传带参数,键/值对排列 panel.attr("user_age",user_age); pa ...

  7. 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

  8. 点击div折叠

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta cont ...

  9. 点击div全选中再点击取消全选div里面的文字

    想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...

  10. $('div a') 与$('div>a'),.div+.div2与.div~.div2

    $('div a'):div标签下所有层次a元素的jquery对象 $('div>a'):div标签下子元素层次a元素的jquery对象 <body> <div class=' ...

随机推荐

  1. pytorch学习笔记——训练时显存逐渐增加,几个epoch后out-of-memory

    问题起因:笔者想把别人的torch的代码复制到笔者的代码框架下,从而引起的显存爆炸问题 该bug在困扰了笔者三天的情况下,和学长一同解决了该bug,故在此记录这次艰辛的debug之路. 尝试思路1:检 ...

  2. 牛客小白月赛2 D题虚虚实实

    题目链接:https://www.nowcoder.com/acm/contest/86/D 解题思路:这题目就是判断是否存在欧拉路径.由无向图存在欧拉路径的充分必要条件可知先判断是否联通,再判断是否 ...

  3. redis添加缓存配置类

    redis添加缓存配置类 package com.atguigu.servicebase.config; import com.fasterxml.jackson.annotation.JsonAut ...

  4. 红日靶场5-wp

    红日靶场5 环境搭建 win7 账密及域 leo@sun 123.com sun\Administrator dc123.com 双网卡模拟内外网 外网网卡:192.168.130.150 内网网卡: ...

  5. 用Linux搭建网站(LAMP)

    安装环境 演示服务器版本为CentOS 8 安装apache 下载apache yum install httpd httpd-devel 启动apache服务器 systemctl start ht ...

  6. [Acwing 164. 可达性统计] 题解报告

    事实上,这道题并不需要拓扑排序.(当然,拓扑排序还是更快) 题目分析 首先,题目中说了,这是一个有向无环图,所以,我们可以考虑 \(\texttt{DP}\) / 记搜 / 拓扑排序 来解决这道题. ...

  7. 【Python】人工智能-机器学习——不调库手撕深度网络分类问题

    1. 作业内容描述 1.1 背景 数据集大小150 该数据有4个属性,分别如下 Sepal.Length:花萼长度(cm) Sepal.Width:花萼宽度单位(cm) Petal.Length:花瓣 ...

  8. 微信小程序常用代码

    在微信小程序中,可以使用 wx.showToast.wx.showLoading 和 wx.showModal 等方法来显示不同类型的提示框 wx.showToast:用于显示一条浮动的提示框,一般用 ...

  9. curl使用小记(四)——在多线程中使用的问题总结

    目录 1. 概述 2. 详论 2.1. 崩溃 2.2. 初始化 2.3. 性能 3. 参考 1. 概述 很显然,通过URL传输数据是一个耗费性能的行为.所以,一个非常有必要的策略是通过多线程来加快数据 ...

  10. 电商业务容器化遇瓶颈,公有云Docker镜像P2P加速很安全

    当前,电商平台会采用基于Docker的容器技术来承载618大促期间的一些关键业务版块,包括最简单的商品图片展示.订单详情页面等等. 通过容器化改造,电商平台的每个业务版块解耦,可以独立开发.部署和上线 ...