这篇文章主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
购物车页面的设计图
商品的列表
代码：
<ul> <li> <div class="list_details"> <div class="shop_img"></div><div class="goods_presentation"> <div class="pTitle"><p class="p1">{{item.goods_name}}</p></div><!-- <p class="p2">{{item.color}}</p> --><div class="price"> <span class="spanSprice">{{item.now_price | formatMoney}}</span><span class="span_step"> <button>-</button><i>{{item.goods_qty}}</i><button>+</button></span></div></div></div></li></ul>
全选的复选框
全选的代码：
<div class="footerflex"> 全选<span class="management">管理</span><span class="finish">完成</span>删除<div> <span class="summation">合计</span><i>{{ totalPrice }}</i>结算</div></div>
单选的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;<div>本文来源gaodai^.ma#com搞#代!码网</div> }); 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框架实现购物车的复选框全选和反选功能的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue+vant-UI框架实现购物车的复选框全选和反选功能
转载请注明原文链接：vue+vant-UI框架实现购物车的复选框全选和反选功能
