vue+vant-UI框架实现购物车的复选框全选和反选功能

购物车页面的设计图

商品的列表

代码：

{{item.goods_name}}


{{item.now_price | formatMoney}}

-
{{item.goods_qty}}
+

全选的复选框

全选的代码：

     全选
     管理
     完成
     删除
     
      合计
      {{ totalPrice }}
      结算
     
    

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

数组删除

代码

//数组删除
  remove(arr, val) {
   var index = arr.indexOf(val);
   if (index > -1) {
    arr.splice(index, 1);
   }
  }

总结

以上所述是小编给大家介绍的vue+vant-UI框架实现购物车的复选框全选和反选功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！