<div class="search-content">
<Checkbox :value="checkAll" @click.prevent.native="handleCheckAll">全部</Checkbox>
<Checkbox-group v-model="checkGroup" @on-change="checkGroupChange">
<Checkbox v-for="(item, index) in list" :label="item.name" :key="item.code">
<span :title="item.name">{{item.name}}</span>
</Checkbox>
</Checkbox-group>
</div>
<script>
export default {
data() {
return {
indeterminate: true,
checkAll: false,
checkGruop: [],
list: [{
name: 'aa',
code: 1
}, {
name: 'bb',
code: 2
}, {
name: 'cc',
code: 3
}];
}
},
methods: {
//全选按钮
handleCheckAll() {
if(this.indeterminate) {
this.checkAll = false;
} else {
this.checkAll = !this.checkAll;
}
this.indeterminate = false;
if(this.checkAll) {
this.list.forEach(st => {
checkGroup.push(st.code);
});
} else {
this.checkGroup = [];
}
},
//选择按钮
checkGroupChange(data) {
this.checkGroup = data;
if(data.length === this.list.length) {
this.indeterminate = false;
this.checkAll = true;
} else if(data.length > 0) {
this.indeterminate = true;
this.checkAll = false;
} else {
this.indeterminate = false;
this.checkAll = false;
}
}
}
}
</script>

Vue Checkbox全选和选中的方法的更多相关文章

  1. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  2. jquery checkbox全选,全不选,反选方法,jquery checkbox全选只能操作一次

    jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...

  3. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

  4. Jquery学习之路(一) 实现checkbox全选方法

    昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...

  5. JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. checkbox 全选,反选 ,全不选

    在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对 ...

  7. angularjs实现 checkbox全选、反选的思考

    之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...

  8. 练习-checkbox 全选 ,反选, 单选,以及取值

    1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...

  9. checkBox全选全不选及数据提交后台

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. 3D打印GCODE文件学习(二)

    大家可以自己实践一下,那么怎么打开GCODE呢?很简单,只要在桌面上创建一个word文档,然后把“.”后面的docx改成GCODE,它会跳出一个是否更改的框,点击是就行了,然后右键,点击Edit wi ...

  2. 【深入理解Java集合框架】红黑树讲解(上)

    来源:史上最清晰的红黑树讲解(上) - CarpenterLee 作者:CarpenterLee(转载已获得作者许可,如需转载请与原作者联系) 文中所有图片点击之后均可查看大图! 史上最清晰的红黑树讲 ...

  3. Binary Tree Maximum Node

    Find the maximum node in a binary tree, return the node. Example Given a binary tree: 1 / \ -5 2 / \ ...

  4. JAVA条件语句:if;switch case

    if(布尔表达式) { //如果布尔表达式为true将执行的语句 }   如果布尔表达式为true 执行里面的代码 if...else语句: if(布尔表达式){ //如果布尔表达式的值为true } ...

  5. RockeMq源码之Client

    Client中既有producer,也有consumer,先看前者 org.apache.rocketmq.client.producer.DefaultMQProducer.class 一般都是调用 ...

  6. NOIP2011提高组 选择客栈

    原题 题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一家咖啡店,每家咖 ...

  7. 马凯军201771010116《面向对象程序设计(java)》第三周学习总结

    第一部分  理论知识学习与复习部分 1.在第一章里主要对Java中常见的误解这部分进行了细读,也对Java的“白皮书”术语认真的看了一遍,对Java术语有了更深的理解. 2.在第二章中对Java程序的 ...

  8. JAVA学习笔记系列1-Java版本介绍

    JavaSE(Java Standard Edition):标准版,定位在个人计算机上的应用(桌面应用).因为一般都是Windows系统,因此Java的这个发展并不好. JavaEE(Java Ent ...

  9. gitlab修改默认端口

    部署gitlab的时候,一启动,发现80和8080端口已经被占用,无奈,只得先将监听80端口的nginx和监听8080端口的jenkins停止.这会儿有空,琢磨一下如何修改gitlab的默认端口. 修 ...

  10. Arcgis Server 本地化

    一.将API包放入server文件夹 将3.18的arcgis API 解压放入Arcgis Server的安装目录的……\Server\framework\runtime\tomcat\webapp ...