vue+vant-UI框架實(shí)現(xiàn)購物車的復(fù)選框全選和反選功能

更新時(shí)間：2019年11月05日 08:44:14 作者：阿銘~

這篇文章主要介紹了vue+vant-UI框架實(shí)現(xiàn)購物車的復(fù)選框全選和反選功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

購物車頁面的設(shè)計(jì)圖

商品的列表

代碼：

<ul v-if="shoppingListData.rows.length">
<li
v-for="(item,index) in shoppingListData.rows"
:key="index"
>
<van-checkbox
:value="item.goods_id"
v-model="item.isChecked"
checked-color="#07c160"
@click="chooseChange(item.goods_id)"
></van-checkbox>
<div class="list_details">
<div class="shop_img"><img
:src="item.goods_image+'?w=150&h=150&crop=1'"
alt=""
></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
@click="handleReduce(index)"
:disabled="item.goods_qty===1"
>-</button>
<i>{{item.goods_qty}}</i>
<button @click="handleAdd(index)">+</button>
</span>
</div>
</div>
</div>
</li>
</ul>

全選的復(fù)選框

全選的代碼：

<div class="footerflex">
     <van-checkbox
      v-model="AllChecked"
      @click="checkAll"
     >全選</van-checkbox>
     <span 
     class="management" 
     v-if="managementShow"
     @click="management()"
     >管理</span>
     <span 
     class="finish"
     v-if="finishShow"
     @click="management()"
     >完成</span>
     <van-button type="default" class='delete' @click="sureDel()" v-if="finishShow">刪除</van-button>
     <div v-if="managementShow">
      <span class="summation">合計(jì)</span>
      <i>{{ totalPrice }}</i>
      <van-button type="default" class="pay" @click="closeAnAccount()">結(jié)算</van-button>
     </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;
    });
    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);
   }
  },

數(shù)組刪除

代碼

//數(shù)組刪除
  remove(arr, val) {
   var index = arr.indexOf(val);
   if (index > -1) {
    arr.splice(index, 1);
   }
  }

總結(jié)

以上所述是小編給大家介紹的vue+vant-UI框架實(shí)現(xiàn)購物車的復(fù)選框全選和反選功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: