Check boxes of shopping cart written by Vue + van UI framework

Time:2020-5-23

Design of shopping cart page

 

 

List of goods

 

 

code:

{{item.goods_name}}
 
 
 {{item.now_price | formatMoney}}
 
 -
 {{item.goods_qty}}
 +

Product list

Check boxes selected all

 

Code selected all:

Select all
           Administration
           complete
           delete
           
             total
             {{ totalPrice }}
             settlement

Radio change event

code:

//Radio change event
     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 selected all

Code selected all:

//Select all and invert
     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);
       }
     },

Array delete

 

code

//Array delete
     remove(arr, val) {
       var index = arr.indexOf(val);
       if (index > -1) {
         arr.splice(index, 1);
       }
     }

To sum up, we can realize the functions of all selection and anti selection

 

 

Recommended Today

Api: tiktok: user video list

Tiktok tiktok, tiktok, tiktok, Api, Api, jitter, voice, bullet screen comments, jitter, jitter, and jitter. Tiktok tiktok tiktok data, jitter data acquisition, live broadcast of shaking sound Titodata: professional short video data acquisition and processing platform. For more information, please contact:TiToData Massive data collection Collect 500 million pieces of data for customers every day Tiktok […]