欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-07 09:18:46
购物车页面的设计图 商品的列表 代码: 1
    2
  • 6

    购物车页面的设计图

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

     

     

    商品的列表

     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>

    全选的复选框

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

     

     全选的代码:

     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事件

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

     代码:

     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

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

     全选的代码:

     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     },

    数组删除

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

     

     代码

    1     //数组删除
    2     remove(arr, val) {
    3       var index = arr.indexof(val);
    4       if (index > -1) {
    5         arr.splice(index, 1);
    6       }
    7     }

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