vue中实现购物车效果复选框的全选、全不选、以及子选项

vue复选框的全选和全不选 适合初学者

这是静态完整代码
做了一个简单的购物车效果

<li class="header">
   <div class="pro-check">
        <el-checkbox v-model="isAllCheck" @change="selectedAll">全选</el-checkbox>
    </div>
    <div class="pro-img"></div>
    <div class="pro-name">商品名称</div>
    <div class="pro-price">单价</div>
    <div class="pro-num">数量</div>
    <div class="pro-total">小计</div>
    <div class="pro-action">操作</div>
</li>
<li class="shoplist" v-for="(item,index) in shopCart" :key="index">
     <div class="pro-check">
         <el-checkbox v-model="item.select" @change="itemCheck(item)"></el-checkbox>
     </div>
     <div class="pro-img">
         <img :src="item.imgSrc" alt="">
     </div>
     <div class="pro-name">{{item.title}}</div>
     <div class="pro-price">￥{{item.price}}</div>
     <div class="pro-num">
         <el-input-number v-model="item.num" @change="handleChange" :min="1" :max="10" ></el-input-number>
     </div>
     <div class="pro-total">￥{{getTotalItem[index]}}</div>
     <div class="pro-action">
         <el-button type="danger" @click="removeShop(index)">删除</el-button>
     </div>
 </li>

重点来了

这是控制全选和全不选的复选框

这边是子选项

一、当勾选全选时下面子选项都要选中，再次点击全选时，则是取消全选；
二、当子选项都选中时，全选框也要选中；子选项有一个没有选中全选不勾选。

data() {
  return {
       // imgList: [],
       isAllCheck: false,
       // num: 1
   }
},
 selectedAll() {
    // 控制全选 全不选
   this.shopCart.forEach(item => {
        !this.isAllCheck ? item.select = false : item.select = true
    })
},
itemCheck(item) {
  // 当子选项全选中时 全选按钮也要选中 反之则不选中
   var arrTrue = []  // 定义两个空数组 当子选项是选中的状态则放入arrTrue数组中反之放进arrFalse里
   var arrFalse = []  
   this.shopCart.forEach(item=> {
       if(item.select) {
           arrTrue.push(item.select)
       }else {
           arrFalse.push(item.select)
       }
   })
   // 当arrTrue长度等于购物车列表的数组的长度时，说明全部选中
   if(arrTrue.length == this.shopCart.length) {
       this.isAllCheck = true
   }
   // 当arrFalse 长度大于0时 说明其中有 没有勾选的子选项
   if(arrFalse.length >0) {
       this.isAllCheck = false
   }
},

全选效果

其中有一个没选中的效果

到这里差不多结束了 有什么问题可以留言哈。