vue+vant-UI框架写的购物车的复选框全选和反选
程序员文章站
2022-08-02 21:57:06
购物车页面的设计图 商品的列表 代码： 1
- 2
- 6
购物车页面的设计图
商品的列表
代码：
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 }综上所述就能实现全选和反选的功能
上一篇： SEO博客权重上去了流量却增长缓慢的原因