028-86922220
关于创新互联
多方位宣传企业产品与服务 突出企业形象
vue+vant-UI框架如何实现购物车复选框全选和反选的功能-创新互联
小编给大家分享一下vue+vant-UI框架如何实现购物车复选框全选和反选的功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联是一家专业的成都网站建设公司，我们专注网站设计制作、
成都网站建设、网络营销、企业网站建设，
买链接，
广告投放为企业客户提供一站式建站解决方案，能带给客户新的互联网理念。从网站结构的规划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://kswsj.cn/article/djoppg.html
