vue中用van-checkbox全选功能

一、需求

1.点击全选，进行全选或者全不选；
2.点击单个选择，如果所有列都选中了，全选按钮选中状态；
3.取消选中，如果全选按钮时选中状态，变成非选中状态；

二、HTML制作：

1.点击专区名称弹出上图选择列表，选中之后可删除；

<!--这个是上图点击选择框-->
<van-cell title="专区名称(可多选)" class="zoneMain"  @click="chooseZone"  is-link   :required="true" placeholder="请选择"></van-cell>
<!--这个是循环选中的列表-->
<div v-if="zoneArr.length>0" class="zoneList">
  <span v-for="item in zoneArr" :key="item.id">
    {{item.name}}
    <em class="removeZone" @click="removeChoiceZone(index)" v-if="type!='look'">
      <van-icon name="clear" />
    </em>
  </span>
</div>

<!--这个选择弹出窗-->
<van-popup v-model:show="zonePicke" position="bottom" :close-on-click-overlay="false">
       <div class="van-picker__toolbar">
          <button type="button" class="van-picker__cancel" @click="zonePicke = false">取消</button>
          <button type="button" class="van-picker__confirm" @click="onConfirm">确认</button>
        </div>
      <div>
        <div class="selectMain"> 
          <van-cell title="全选" @click="toggleAll">
            <template #right-icon>
              <van-checkbox name="all" shape="square" v-model="checkedAll" checked-color="#fd1213" ref="checkboxes" @change="allCheck" @click="allCheckClick" @click.stop/>
            </template>
          </van-cell>
          <van-checkbox-group            
            v-model="choiceZoneId" 
            @change="change"
            ref="checkboxGroup"
          >
            <van-cell-group  inset>
              <van-cell :title="item.name" clickable @click="toggle(index)" v-for="(item,index) in zoneNameList" :key="item.id">
                <template #right-icon>
                  <van-checkbox :name="item.id" shape="square" :ref="el => zoneNameArrRefs[index] = el" checked-color="#fd1213"  @click.stop/>
                </template>
              </van-cell>             
            </van-cell-group>
          </van-checkbox-group>
        </div>
      </div>
    </van-popup>

<!--下面是样式-->
<style lang="less" scoped>
.zoneList{
  padding:10px;
  position:relative;
  text-align: left;
  span{
    border:1px solid #ddd;
    border-radius: 5px;
    padding:3px 15px 3px 5px;
    margin: 5px;
    position:relative;
    display: inline-block;
    
    .removeZone{
      position: absolute;
      right:0;
      top:0;
    }
  }
}
</style>

2.数据以及方法：
1）主要时选择文字checkbox也需要更改，这里用了toggle方法；
2）当点击checkbox-group中的checkbox时，会触发change方法，这个方法会判断是否全选，然后这里会更改checkedAll的值，从而会触发全选的change="allCheck"这个方法；但是这个方法用this.$refs.checkboxGroup.toggleAll这个方法，会触发checkbox-group的change方法,所以我用了clickAll这个值做判断；

export default {
    data() {
        return {
            checkedAll: false, //是否点击的是全选
            showPicker:false, //选择专区是否弹出   
            choiceZoneList:[],//选中的专区Item; 
            zoneNameArrRefs:[], //多选el合计
            zoneNameList:[{  //可选择的专区名称列表
                "id": 30,
                "name": "测试2"
            },
            {
                "id": 29,
                "name": "测试1"
            }
        ],
        zoneArr:[], //确定选中的专区Id,
        clickAll:false, //是否选择的全选按钮
        choiceZoneId:[],//弹出时选中的id
       }
    },
    methods:{
        chooseZone() {          
          //选择专区名称 多选； 
          //获取已选中的专区列表
          this.choiceZoneList = []; 
          this.clickAll = false;
          this.zoneArr.map(item=>{
            this.choiceZoneId.push(item.id); //弹出时默认选中哪些；
            this.choiceZoneList.push(item);
          })
          if(this.choiceZoneList.length==this.zoneNameList.length) this.checkedAll = true; 
          this.zonePicke = true;
        },
        onConfirm(values){ //专区确认选择
          //如果选中的list为空
          if(this.choiceZoneList.length==0){
            this.$toast('请选择专区名称');
            return false;
          }
          this.zoneArr = JSON.parse(JSON.stringify(this.choiceZoneList)); //确认选中，获取选择的id
          this.zonePicke = false;
        },
        change(val) { //更改选框
          //如果选中是否是全选，如果全选把所有都选中；
          //取消选中，看全选是否打开，如果是就去选全选的选择；    
          this.choiceZoneList = [];
          this.zoneNameList.map(item=>{ //更改
            if(val.includes(item.id)) this.choiceZoneList.push(item);
          })
           //判断选中的个数跟数据的个数是否一致，如果是一致，全选按钮为true,否则是false;
          if(val.length==this.zoneNameList.length) this.checkedAll = true; 
          else {
            this.checkedAll = false;
            this.clickAll = false; 
          }
        },
        toggle(index) { //点击文字变成选框操作
          this.zoneNameArrRefs[index].toggle();
        },    
        toggleAll(all) { // 全选
          this.$refs.checkboxes.toggle();
          this.clickAll = true;      
        },
        allCheck(e){      
          //e会是true和false
          if(this.clickAll) this.$refs.checkboxGroup.toggleAll(e); 
          //只有点击的全选按钮才把其他的checkbox做全选一样的操作；这里会触发change     
        },
        allCheckClick() { //点击全选
          this.clickAll = true;
        },
        removeChoiceZone(index) {
          //删除选中的专区
          this.zoneArr.splice(index,1);
        }
    }
}