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
   }
},

全选效果
在这里插入图片描述
其中有一个没选中的效果
在这里插入图片描述
到这里差不多结束了 有什么问题可以留言哈。

  • 4
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值