Vue Checkbox全选和选中的方法
<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全选和选中的方法的更多相关文章
- jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
- jquery checkbox全选,全不选,反选方法,jquery checkbox全选只能操作一次
jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 >>>>>&g ...
- vue中的checkbox全选和反选
前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...
- Jquery学习之路(一) 实现checkbox全选方法
昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...
- JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- checkbox 全选,反选 ,全不选
在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对 ...
- angularjs实现 checkbox全选、反选的思考
之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...
- 练习-checkbox 全选 ,反选, 单选,以及取值
1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
- checkBox全选全不选及数据提交后台
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- 微信开发】【Asp.net MVC】-- 微信分享功能
[微信开发][Asp.net MVC]-- 微信分享功能 2017-01-15 09:09 by stoneniqiu, 12886 阅读, 15 评论, 收藏, 编辑 内嵌在微信中的网页,右上角都会 ...
- web在线智能四则运算挑战赛
本网站主要针对小学生,是一个智能在线学习和测试平台,平台有精美炫酷的网页,和可靠的数据,主要特色,自动出题.验证码机制.非空检测.正则匹配不同年级同学而出不同难度的题目,在线结算.时间控制,时间一到自 ...
- [Leetcode 108]有序数组转二叉搜索树Convert Sorted Array to Binary Search Tree
[题目] 给出的升序排序的数组,个数必为奇数,要求形成二叉搜索(平衡)树. [思路] 辅助函数fun,[0,len]=>[0,mid-1]+[mid+1,len]. 当left>right ...
- 使用md5加密算法完成简单的登录和注册功能
原理: 登录:后端controller层获取到客户的密码,通过下面代码:new Sha256Hash(pwd).toHex();将密码转换成md5散列,生成一个新的字符串与数据库的值进行比对,根据不同 ...
- OSI七层模型与TCP/IP五层模型(转)
reference:https://www.cnblogs.com/qishui/p/5428938.html 博主是搞是个FPGA的,一直没有真正的研究过以太网相关的技术,现在终于能 ...
- 为什么ssh 执行完命令以后 挂了, hang , stop respond
- 下载EU台网(欧洲台网)的地震波数据
retrievedata.py ### here first to check the existence of the focal mechanism event file in the NDK d ...
- FCC JS基础算法题(4):Title Case a Sentence(句中单词首字母大写)
题目描述: 确保字符串的每个单词首字母都大写,其余部分小写.像'the'和'of'这样的连接符同理. 算法: function titleCase(str) { // 转小写及分割成数组 var st ...
- day 07 元组,字典和集合等数据类型介绍
元组:就是一个不可变的列表 1.用途,当我们需要记录多个值,并且没有更改的需求的时候,应该使用元组 2定义方式:使用,在 ( ) 中分隔开多个任意类型的值 注:t=("egg",) ...
- pacbio bax.h5文件处理及ccs计算
1.NCBI文件格式如下: 2.格式转换 (1) bas.h5 -> ccs source /share/nas2/genome/biosoft/smrtanalysis/2.3.0/smrta ...