vue+vant-UI框架写的购物车的复选框全选和反选

购物车页面的设计图

 

 

商品的列表

 

 

 代码：

 1 <ul v-if="shoppinglistdata.rows.length">
 2 <li
 3 v-for="(item,index) in shoppinglistdata.rows"
 4 :key="index"
 5 >
 6 <van-checkbox
 7 :value="item.goods_id"
 8 v-model="item.ischecked"
 9 checked-color="#07c160"
10 @click="choosechange(item.goods_id)"
11 ></van-checkbox>
12 <div class="list_details">
13 <div class="shop_img"><img
14 :src="item.goods_image+'?w=150&h=150&crop=1'"
15 alt=""
16 ></div>
17 <div class="goods_presentation">
18 <div class="ptitle"><p class="p1">{{item.goods_name}}</p></div>
19 <!-- <p class="p2">{{item.color}}</p> -->
20 <div class="price">
21 <span class="spansprice">{{item.now_price | formatmoney}}</span>
22 <span class="span_step">
23 <button
24 @click="handlereduce(index)"
25 :disabled="item.goods_qty===1"
26 >-</button>
27 <i>{{item.goods_qty}}</i>
28 <button @click="handleadd(index)">+</button>
29 </span>
30 </div>
31 </div>
32 </div>
33 </li>
34 </ul>

全选的复选框

 

 全选的代码：

 1         <div class="footerflex">
 2           <van-checkbox
 3             v-model="allchecked"
 4             @click="checkall"
 5           >全选</van-checkbox>
 6           <span 
 7           class="management" 
 8           v-if="managementshow"
 9           @click="management()"
10           >管理</span>
11           <span 
12           class="finish"
13           v-if="finishshow"
14           @click="management()"
15           >完成</span>
16           <van-button type="default" class='delete' @click="suredel()" v-if="finishshow">删除</van-button>
17           <div v-if="managementshow">
18             <span class="summation">合计</span>
19             <i>{{ totalprice }}</i>
20             <van-button type="default" class="pay" @click="closeanaccount()">结算</van-button>
21           </div>
22         </div>

单选的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     }

综上所述就能实现全选和反选的功能