购物车页面的设计图
商品的列表
代码:
- 1
- [list] 2
- [*] 6 12 13
- 17 18 {{item.goods_name}}
- 19 20 21 {{item.now_price | formatMoney}}22 23 -27 [i]{{item.goods_qty}}[/i]28 +29 30
- 31
- 32
- 3334
- [/list]
复制代码 商品列表全选的复选框
全选的代码:- 1 2 全选 6 管理11 完成16 删除17 18 合计19 [i]{{ totalPrice }}[/i]20 结算21
- 22
复制代码 单选的change事件
代码:- 1 // 单选的change事件 2 chooseChange(id) { 3 if (this.selectedData.indexOf(id) > -1) { 4 this.remove(this.selectedData, id); 5 } else { 6 this.selectedData.push(id); 7 } 8 if (this.selectedData.length < this.shoppingListData.total) { 9 this.AllChecked = false;10 } else {11 this.AllChecked = true;12 }13 console.log(this.selectedData);14 }
复制代码 全选的JS
全选的代码:- 1 // 全选和反选 2 checkAll() { 3 let list = this.shoppingListData.rows; 4 if (this.AllChecked) { 5 list.forEach(element => { 6 element.isChecked = false; 7 }); 8 this.selectedData = []; 9 } else {10 list.forEach(element => {11 element.isChecked = true;12 if (this.selectedData.indexOf(element.goods_id) < 0) {13 this.selectedData.push(element.goods_id);14 }15 });16 console.log(this.selectedData);17 }18 },
复制代码 数组删除
代码- 1 //数组删除2 remove(arr, val) {3 var index = arr.indexOf(val);4 if (index > -1) {5 arr.splice(index, 1);6 }7 }
复制代码 综上所述就能实现全选和反选的功能
免责声明:本文内容部分来源于网络,出于网络分享目的,如对您的权益版权有异议我们将予以删除,谢谢合作! |
|