<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. 国内 AI 成图第一案!你来你会怎么判?

    我国目前并未出台专门针对网络爬虫技术的法律规范,但在司法实践中,相关判决已屡见不鲜,K 哥特设了"K哥爬虫普法"专栏,本栏目通过对真实案例的分析,旨在提高广大爬虫工程师的法律意识, ...

  2. 吉特日化MES & 医药行业相关专业术语汇总

  3. [UOJ#748] [UNR#6 1B] 机器人表演

    在这个科技发达的年代,真人表演已经落伍了.参加完 UOI 后,hehe 蚤去到了下山市大剧院,观看下山市最火爆的机器人表演. 机器人有时比人类更能抓住事情的本质.所谓表演,其实也就是开场有若干个机器人 ...

  4. MongoDB中的分布式集群架构

    MongoDB 中的分布式集群架构 前言 Replica Set 副本集模式 副本集写和读的特性 Sharding 分片模式 分片的优势 MongoDB 分片的组件 分片键 chunk 是什么 分片的 ...

  5. JDK动态代理~Cglib动态代理,进行方法的增强

    JDK动态代理(必须要有接口,代理类和被代理类实现相同的接口) public class UserServiceJDKProxy { public static UserService createU ...

  6. 开源易课堂操作手册-yiketang

    title: 开源易课堂操作手册 date: 2022-01-05 15:10:43.915 updated: 2023-04-24 10:21:28.476 url: https://www.yby ...

  7. 记一次windows病毒联合排查全过程

    8月2日通过态势感知平台,发现大量内部DNS服务器有恶意请求,且告警描述为:试图解析僵尸网络C&C服务器xmr-eu2.nanopool.org的地址,通过截图可以看到,用户每5分钟会定期向目 ...

  8. CSS 基础 4 - CSS 常用单位

    CSS 基础 4 - CSS 常用单位 px:基础单位 em:相对当前父容器的系数,可以累乘 rem:相对根 <html> 的系数,方便计算 vw/vh:viewport width/he ...

  9. 23、Flutter AppBar TabBar TabBarView

    AppBar自定义顶部按钮图标.颜色 class MyHomePage extends StatelessWidget { const MyHomePage({super.key}); @overri ...

  10. 华为云原生数据仓库GaussDB(DWS)深度技术解读:融、快、大、稳、易

    摘要:云原生数据仓库GaussDB(DWS)架构师应邀为大家解读数仓深度技术. "云原生"在2020年成为备受瞩目的热词,云原生在确保企业数字化转型中资源快速供给.按需使用的同时, ...