vue实现商品购物车全选反选
作者:Amnesia�
这篇文章主要为大家详细介绍了vue实现商品购物车全选反选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现商品购物车全选反选的具体代码,供大家参考,具体内容如下
项目需求:
实现一个购物车
全选框实现对商家和商品的全选
商家全选框实现对当前商家所有商品的全选
取消其中一个商品则取消对应商家全选和全选框
选中一个商家下的所有商品则勾选对应商家的全选框,不勾选全选框
选中所有商品则勾选所有商家全选框和全选框
我的思路:
1、通过对数据的简单操作可实现更深层次的全选操作
2、vue.$set(object, key, value)给对象添加属性可以更新视图
3、通过es6的every判断数组中是否每个元素都满足条件,都满足返回true,有一个不满足则返回false
template:
<div class="box"> <input type="checkbox" v-model="checkedAll" @change="checkAll"> 全选 </div> <div class="list" style="margin-left:50px;" v-for="(val,k) in data" :key="k"> <div class="box"> <input type="checkbox" v-model="val.checked" @change="_checkAll(val)"> {{val.seller}} </div> <ul v-for="(item,index) in val.goodsList" :key="index"> <li> <input type="checkbox" v-model="item.checked" @change="handleCheck(item,index)"> {{item.name}} </li> </ul> </div>
scritpt层
var app = new Vue({ el: "#app", data: { checkedAll: false, //控制是否全选 data: [{ seller: "商家1", goodsList: [{ name: '商品1' }] }, { seller: "商家2", goodsList: [{ name: '商品2' }, { name: '商品3' }] }] //数据 }, mounted() { this.data.forEach(item => { this.$set(item, "checked", false) //Vue 解决不能检测到对象属性的添加或删除 // item.checked = false; //如果为真实数据直接设置的对象改变值不会更新视图 if (item.goodsList) { item.goodsList.forEach((citem) => { this.$set(citem, "checked", false) // citem.checked = false; }) } }); }, methods: { //全选 checkAll() { this.data.forEach(item => { item.checked = this.checkedAll; if (item.goodsList) { item.goodsList.forEach(citem => { citem.checked = this.checkedAll; }) } }) }, //商家全选 _checkAll(val, k) { val.goodsList.forEach(item => { item.checked = val.checked; }); if (this.data.every(item => item.checked)) { this.checkedAll = true; } else { this.checkedAll = false; } }, //商品选择框 handleCheck(item, index) { var check = []; //保存中间层是否被选中的布尔值 this.data.forEach((items, index) => { if (items.goodsList) { var bool = items.goodsList.every(citem => citem.checked); if (bool) { items.checked = true; } else { items.checked = false; } check.push(bool); } }) if (check.indexOf(false) == -1) { this.checkedAll = true; } else { this.checkedAll = false; } }, } })
效果如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。