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 ...
随机推荐
- Python---高级函数map, filter, zip, enumerate等的用法
今天看自然语言处理这本书的时候,被这里的高级函数的概念吸引了,因为我觉得所有的函数都只是函数而已,是为了实现特定功能而实现的,不应该有高级,低级之分啊!不过了解之后,发现这几个函数确实是有点高级,非常 ...
- netty源码分析之一:server的启动
nio server启动的第一步,都是要创建一个serverSocketChannel,我截取一段启动代码,一步步分析: public void afterPropertiesSet() throws ...
- c函数 文件名通配符
static bool IsMatched(CONST TCHAR* p, CONST TCHAR* q) { CONST TCHAR *r, *z, *x = _T(""); f ...
- Handlebars的基本用法
使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Handlebars 强大的功能. ...
- Python中的lambda的简单介绍
在学习python的过程中,lambda的语法经常出现,现在将它整理一下,以备日后查看. 1.lambda是什么? 举个例子如下: func=lambda x:x+1 print(func(1)) p ...
- Flex 布局语法教程
一.Flex布局是什么? Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ display: - ...
- oracle高级分组
基本group by用法 create table test_table(a varchar(20),b varchar(20),c varchar(20)) insert into test_tab ...
- 蓝牙协议分析(3)_BLE协议栈介绍
1. 前言 通过“蓝牙协议分析(2)_协议架构”的介绍,大家对蓝牙协议栈应该有了简单的了解,但是,肯定还有“似懂非懂.欲说还休”的感觉.有这种感觉太正常了,毕竟蓝牙协议是一个历史悠久又比较庞大的协议, ...
- 剑指Offer 46. 孩子们的游戏(圆圈中最后剩下的数) (其他)
题目描述 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...
- Javascript Canvas验证码
用Canvas画的验证码,效果图如下 1.验证码的JS代码,保存到一个名称是validatedCode.js的文件内,代码如下: (function(window,document){ functio ...