vue+vant-UI框架如何实现购物车复选框全选和反选的功能
小编给大家分享一下vue+vant-UI框架如何实现购物车复选框全选和反选的功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
专注于为中小企业提供做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业莲都免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
购物车页面的设计图
商品的列表
代码：
![]()
{{item.goods_name}}
{{item.now_price | formatMoney}}
{{item.goods_qty}}
+
全选的复选框
全选的代码：
全选
管理
完成
删除
合计
{{ totalPrice }}
结算
单选的change事件
代码：
// 单选的change事件
chooseChange(id) {
if (this.selectedData.indexOf(id) > -1) {
this.remove(this.selectedData, id);
} else {
this.selectedData.push(id);
}
if (this.selectedData.length < this.shoppingListData.total) {
this.AllChecked = false;
} else {
this.AllChecked = true;
}
console.log(this.selectedData);
}全选的JS
全选的代码：
// 全选和反选
checkAll() {
let list = this.shoppingListData.rows;
if (this.AllChecked) {
list.forEach(element => {
element.isChecked = false;
});
this.selectedData = [];
} else {
list.forEach(element => {
element.isChecked = true;
if (this.selectedData.indexOf(element.goods_id) < 0) {
this.selectedData.push(element.goods_id);
}
});
console.log(this.selectedData);
}
},数组删除
代码
//数组删除
remove(arr, val) {
var index = arr.indexOf(val);
if (index > -1) {
arr.splice(index, 1);
}
}以上是“vue+vant-UI框架如何实现购物车复选框全选和反选的功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
分享文章：vue+vant-UI框架如何实现购物车复选框全选和反选的功能
本文网址：http://bzwzjz.com/article/ihiepg.html
