<template>
    <div class="car">
        <h3 style="text-align: center;">购物车</h3>
       <ul>
          <li v-for="(item,index) in carts" :key="index">
            <div class="carProList">
               <div class="carProSelect carProInfo">
                     <van-checkbox v-model="item.danxuan" @change="danxuanChecked(item.danxuan)"/>
               </div>
               <div class="carProImg carProInfo">
                     <img :src="item.proImg"/>
               </div>
               <div class="cartInformation carProInfo">
                     <div>
                         {{item.proName}}
                     </div>
                     <div>
                         {{item.proPrice}}
                     </div>
                     <div>
                         <van-stepper v-model="item.homeValue" />
                     </div>
               </div>
               <div class="deleteCarPro carProInfo">
                     1
               </div>
            </div>
          </li>
       </ul>
        <van-submit-bar
              :price="sum()"
              button-text="提交订单"
            >
              <van-checkbox @change="toggleCheckedAll" v-model="checkedAll">全选</van-checkbox>
            </van-submit-bar>
    </div>
</template>

<script>
 import { mapState } from 'vuex'
 import { Checkbox, CheckboxGroup } from 'vant';
 import { Card } from 'vant';
 import { Stepper } from 'vant';
 import { SubmitBar } from 'vant';
 export default{
    data(){
     return{
         checkedAll:true,
         partCheck:false
     }
   },
   components:{
     [Checkbox.name]:Checkbox,
     [CheckboxGroup.name]:CheckboxGroup,
     [Card.name]:Card,
     [Stepper.name]:Stepper,
     [SubmitBar.name]:SubmitBar
   },
   computed:{
     ...mapState([
       "carts"
     ])
   },
   methods:{
     toggleCheckedAll(val){
       if(!val){
            this.carts.forEach((item)=>{
              item.danxuan = false  
            })
            this.checkedAll = false
       }else{
            this.carts.forEach((item)=>{
              item.danxuan = true  
            })
            this.checkedAll = true
       }
     },
     danxuanChecked(cart){
       if(!cart){
         this.checkedAll = false
       }
       var isExitCheckedNo = this.carts.every(item=>{
         return item.danxuan === true     
       });
       console.log(isExitCheckedNo);
       
       if(isExitCheckedNo){
         this.checkedAll = true    
       }else{
           this.checkedAll = false
       }
     },
     sum(){
       var totalSum = 0;
       this.carts.forEach((item)=>{
         if(item.danxuan){
           totalSum+=item.proPrice*item.homeValue*100    
         }
       })
       return totalSum
     }
   }
 }
</script>

我是用vue+vantui搭建的一个购物车，我想实现全选和全不选，以及单选的时候判断是否全部选中和部分选中，但是vant它的触发事件是change，也就是我在将列表中的其中一个checkbox设置为false时，我的本意是只让全选变为checked =false，可是这个时候全选按钮change了，变成false了，然后会执行让所有单选变成false(因为我在点击全选按钮时如果选中，所有列表全选中，如果全选按钮不选中，则所有的列表不选中)。 大神帮忙分析下，