vue实现商品购物车全选反选
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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;
}
},
}
})效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
