vue全选反选demo
<template>
<div>
<div class="xuanze">
<label><input type="checkbox" v-model="all" @change="allfn">全选</label> <br><br> <div class="store" v-for="(store,index1) in stores">
<label><input type="checkbox" v-model="store.all" @change="storefn(index1)">{{store.name}}</label>
<ul>
<li v-for="(item,index2) in store.product"><label><input type="checkbox" v-model="item.xuanze" @change="productfn(index1,index2)">{{item.id}}</label></li>
</ul>
</div>
</div>
</div>
</template> <script>
export default {
data () {
return {
all: false, stores: [
{
name: '草泥马一号店',
all: false,
sellength: 0,
product:[
{
id: 1,
xuanze: false,
},
{
id: 2,
xuanze: false,
},
{
id: 3,
xuanze: false,
},
]
},
{
name: '草泥马二号店',
all: false,
sellength: 0,
product:[
{
id: 1,
xuanze: false,
},
{
id: 2,
xuanze: false,
},
{
id: 3,
xuanze: false,
},
]
},
]
}
},
methods: {
allfn: function(){
for (let i = 0;i < this.stores.length ;i++ )
{
let store = this.stores[i];
store.sellength = this.all ? store.product.length : 0;
store.all = this.all;
for (let j = 0;j < store.product.length ;j++ )
{
store.product[j].xuanze = this.all;
}
}
},
storefn: function(index1){
let store = this.stores[index1];
let res = store.all;
store.sellength = res ? store.product.length : 0;
for (let i = 0;i < store.product.length ;i++ )
{
store.product[i].xuanze = res;
}
this.all = true;
for (let j = 0;j < this.stores.length ;j++ )
{
if (!this.stores[j].all)
{
this.all = false;
break;
}
}
},
productfn: function(index1,index2){
let store = this.stores[index1];
let product = store.product[index2];
store.sellength = product.xuanze ? store.sellength+1:store.sellength-1;
store.all = store.sellength == store.product.length;
this.all = true;
for (let j = 0;j < this.stores.length ;j++ )
{
if (!this.stores[j].all)
{
this.all = false;
break;
}
}
}
}
}
</script> <style scoped>
.xuanze{
margin: 100px;
}
.store{
border-bottom: 1px solid red;
margin-bottom: 5px;
}
ul{
margin-left: 20px;
}
</style>
vue全选反选demo的更多相关文章
- Vue 全选/取消全选,反选/取消反选
这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...
- jquery实现全选/反选功能
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- 全选,反选,获取值ajax提交
//必须先加载jquery //加载 弹出框插件 artdialog http://www.planeart.cn/demo/artDialog/ /****全选反选*开始**/ $(document ...
- JavaScript、全选反选-课堂笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于input全选反选恶心的异常情况
上一篇讲到:第一次点击全选按钮input显示对勾,第二次则不显示,需要用prop来添加checked属性. 但是用prop会出现一个问题,对勾显示,而checked属性不会被添加(比如:$(" ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
随机推荐
- HBase读写的几种方式(一)java篇
1.HBase读写的方式概况 主要分为: 纯Java API读写HBase的方式: Spark读写HBase的方式: Flink读写HBase的方式: HBase通过Phoenix读写的方式: 第一种 ...
- linux下安装与配置Redis
1.安装 (1)获取源代码 wget http://download.redis.io/releases/redis-4.0.8.tar.gz (2)解压 tar xzvf redis-4.0.8.t ...
- Java 计算两个日期相差月数、天数
package com.myjava; import java.text.ParseException; import java.text.SimpleDateFormat; import java. ...
- javascript基础 之 void
1,viod是什么? javascript:void(0) 这样的代码是js中很常用的代码,void是javascript中定义的一个操作符,void后面跟一个表达式,void操作符会立即执行后面的表 ...
- Stack的相关API
public class Stack<E> extends Vector<E> : Stack类代表后进先出(LIFO)堆栈的对象. 它扩展了类别Vector与五个操作,允许一 ...
- 使用工具intellij idea 进行java web开发简介
一.工具下载及安装准备 1.首先下载工具 Intellij idea ,下载地址:https://www.jetbrains.com/ 2.破解 百度下载一个 JetbrainsCrack-2.7- ...
- unity发布的WebGL部署到IIS
一.创建WebGL代码 在win7下,Unity3D中发布WebGL,然后部署到IIS,只要代码是对,关键是添加mime类型 二.为网站添加mime类型 .json text/json .unity3 ...
- 【原创】大叔经验分享(12)如何程序化kill提交到spark thrift上的sql
spark 2.1.1 hive正在执行中的sql可以很容易的中止,因为可以从console输出中拿到当前在yarn上的application id,然后就可以kill任务, WARNING: Hiv ...
- 【原创】大叔问题定位分享(5)Kafka客户端报错SocketException: Too many open files 打开的文件过多
kafka0.8.1 一 问题 10月22号应用系统忽然报错: [2014/12/22 11:52:32.738]java.net.SocketException: 打开的文件过多 [2014/12/ ...
- 【java】Java组件概览(1)
如上图所示,Oracle的Java SE8有两个产品:JDK和JRE.其中,JRE的内容包括图中①~⑤,它是JDK的子集. ⑥中的红色部分与JRE有重合. [参考] 1.https://docs.or ...