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 ...
随机推荐
- vuex-Module
Vuex 允许将 store 分割成模块(module). 每个模块拥有自己的 state.mutation.action.getter.甚至是嵌套子模块 const moduleA = { stat ...
- VSTO:使用C#开发Excel、Word【12】
Excel对象模型中的事件了解excel对象模型中的事件至关重要,因为这通常是代码运行的主要方式.本章将检查Excel对象模型中的所有事件,引发事件以及可能与这些事件关联的代码类型. Excel对象模 ...
- php解析Excel表格并且导入MySQL数据库
最近根据客户需求,需要增加一个导入Excel表格的功能,Excel中存放的是知识库中医知识的分类体系目录.是在thinkphp框架下编写的代码,用的是phpexcel第三方包.测试环境用的是xampp ...
- 第一个java程序中文乱码以及如何解决
出现问题:编码gbk的不可映射字段 原因:.java文件的编码与cmd命令执行器使用的编码不一致 我们使用的.java文件的编码为UTF-8 Cmd默认使用的编码为GBK: 解决方式统一编码: 方法1 ...
- JavaScript之Math
1. Math Math是js的内置函数,无需创建,把Math作为对象使用就可以调用其属性和方法. 2.Date 2.1 日期对象创建 var now = new Date ( ); 含参数时表 ...
- TensorFlow 算术运算符
TensorFlow 算术运算符 TensorFlow 提供了几种操作,您可以使用它们将基本算术运算符添加到图形中. tf.add tf.subtract tf.multiply tf.scalar_ ...
- 安装软件碰见error2502 2503
把鼠标放到Win8屏幕的最左下角,等待Win8 Metro界面的缩略图出现后点击鼠标右键,在弹出的菜单中选择“命令提示符(管理员)” 打开的“命令提示符(管理员)” 找到自己将要安装的程序路径 ...
- nginx下运行php的程序时返回200访问却是空白页问题的解决方法
由于nginx与php-fpm之间的一个小bug,会导致这样的现象: 网站中的静态页面 *.html 都能正常访问,而 *.php 文件虽然会返回200状态码, 但实际输出给浏览器的页面内容却是空白. ...
- single-cell RNA-seq 工具大全
[怪毛匠子-整理] awesome-single-cell List of software packages (and the people developing these methods) fo ...
- 第k大元素
在数组中找到第k大的元素 样例 给出数组[9,3,2,4,8],第三大的元素是4 给出数组 [1,2,3,4,5],第一大的元素是5,第二大的元素是4,第三大的元素是3,以此类推 注意 你可以交换数组 ...