<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. CCF关于公开NOIP复赛选手程序的通告

    为使参加NOIP复赛的选手能了解和保存其竞赛时编制的程序,并相互监督,CCF责成各省特派员在复赛后公开选手程序. 公布方式:以提高组和普及组分别为单位,通过网站或邮件等方式公开.以每个选手可以看到本省 ...

  2. Cookie中的sessionid与JSONP原理

    一.首先说明一下cookie中的sessionid的作用. 1.cookie只是一些文本内容,多是键值对的形式,是请求头中的一部分 2.http是无连接的 知道这两点,就可以很容易的理解session ...

  3. JQ 向上查找指定 同辈元素 找到后返回

    由于JQ 只有 prev() 和 prevAll() prev()只能找一个 prevAll()把所有的都给找了 我想要的是: 在同辈元素中向上找,直到找到 我指定的元素 后,返回他. 所以自己写了个 ...

  4. Python之路,Day9 - 异步IO\数据库\队列\缓存

    https://www.cnblogs.com/alex3714/articles/5248247.html http://www.cnblogs.com/wupeiqi/articles/51327 ...

  5. overload(重载)和override(覆盖)的注意点

    使用overload(重载)的几个注意点: 在使用重载时只能通过不同的参数形式.例如:不同的参数类型,不同的参数个数,不同的参数顺序,当然,同一个方法内的几个参数类型必须不一样.例如可以是fun(in ...

  6. Centos7修改分区空间

    一:缩小/home空间 1.1:备份/home内容 cp -r /home/* /homebak 1.2:删除挂载/home umount /home 1.3:删除/home所在lv lvremove ...

  7. Jsの练习-数组常用方法 -splice()

    splice() 功能:1.可以实现删除,插入和替换. 删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数. 例如:splice(0,2)会删除数组中的前2项. 插入:可 ...

  8. js获取table中的列的数字的和

    function getTdValue(a) { var tableId = document.getElementById("tab"); var num; for(var i= ...

  9. 获取真实ip三个方法

    方法一: /** * 获取客户端IP地址 * * @return string */function get_client_ip(){ if (getenv("HTTP_CLIENT_IP& ...

  10. cmd运行jar

    https://blog.csdn.net/lemon_tree12138/article/details/44081909 https://www.cnblogs.com/LanTianYou/p/ ...