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 ...
随机推荐
- Spring Security Oauth2 单点登录案例实现和执行流程剖析
Spring Security Oauth2 OAuth是一个关于授权的开放网络标准,在全世界得到的广泛的应用,目前是2.0的版本.OAuth2在“客户端”与“服务提供商”之间,设置了一个授权层(au ...
- tensoFlow之DNN文本分类
TensorFlow文本分类: 亲测可用:https://blog.csdn.net/u012052268/article/details/77862202 简单实例:https://www.leip ...
- 分数化小数(decimal)
分数化小数 ①我的程序 #include<iostream>using namespace std;int main(void){ int a,b,c,kase=0; while(scan ...
- Linux应用调试 :使用gdb和gdbserver进行远程调试
一.引言 在日常程序开发中不免遇到类似空指针操作导致程序崩溃的问题,所以需要一定的手段去定位bug,而断点调试是普遍使用的技巧,比如Windows中用VC++的debug模式进单步运行.断点调试等,而 ...
- python笔记9-字符串操作
1.定义字符串 字符串有下标从0开始,用[]可以来取下标 2.字符串读取 字符串可以使用循环for,每次取一个取出,循环对象的每个元素 3.字符串修改-字符串不可修改 字符串是不可变变量,一旦定义就不 ...
- Problem E: 平面上的点——Point类 (V)
Description 在数学上,平面直角坐标系上的点用X轴和Y轴上的两个坐标值唯一确定.现在我们封装一个“Point类”来实现平面上的点的操作. 根据“append.cc”,完成Point类的构造方 ...
- json&pickle序列化和软件开发规范
json和pickle 用于序列化的两个模块 json 用于字符串和python数据类型间进行转换,json只支持列表,字典这样简单的数据类型 但是它不支持类,函数这样的数据类型转换 pickle ...
- less 查看日志
上下键,空格下一页,字母B上一页 ,字母Q退出,n(小写字母n)上一个关键字位置N(大写字母N)下一个关键词位置] 二.查找某个时间段的日志:比如查询2018-08-15 10:37:32到2018 ...
- django中利用FastDFS来上传图片的流程
好处:海量问题,存储容量扩展方便,文件内容重复并且对静态文件的访问也有了提升等.
- Windows10下安装MySQL8.0
1:首先去官网下载安装包 下载地址:https://dev.mysql.com/downloads/mysql/ 这是我下载版本 2:将解压文件解压到你安装的目录:E:\mysql-8.0.11-wi ...