vue列表的全选和反选实现逻辑

有两种实现方法逻辑：
第一种使用computed属性，第二种使用watch方法：
总结主要思路就是列表和全选属性相关联利用监听属性和数组every的方法，计算属性和数组filter方法，需要注意computed终get和set方法的使用

<template>
  <div class="container_big">
    <inputSearch v-model="orderNumber" @searChList='searChList' class="headSearch"></inputSearch>
     <div class="title">
            <van-pull-refresh  v-if="listconter.length>0" v-model="refreshing"    @refresh="onRefresh" >
                  <van-list
                          v-model="loading"
                          :finished="finished"
                          finished-text="-我也是有底线的-"
                          @load="onLoad"
                          :immediate-check="false"
                        >
                      <div class="content" v-for="(item,index) in listconter" :key="index">
                        <div><van-checkbox v-model="item.checkedItem"></van-checkbox></div>
                        <div style="margin-left:9px;width: 100%;">
                          <div class="content_right">
                            <div class="content_right_1">
                             <img style="margin-right:6px" src="@/assets/img/[email protected]" />
                              <div>三巨头有限公司{{item.customerName}}</div>
                            </div>
                            <div class="content_right_2">
                              <div style="margin-right:10px"><img src="@/assets/img/[email protected]"/></div>
                              <div><img src="@/assets/img/[email protected]"/></div>
                            </div>
                          </div>
                          <div class="number">18982882829</div>
                          <div class="text">上海市青浦区华徐公路3011弄348号{{item.customerAddress}}</div>
                          <div class="content_bottom">
                            <span>本月500{{item.monthCount}}单</span>
                            <span>电子面单</span>
                            <span>报价单</span>
                          </div>
                        </div>
                      </div>
            </van-list>
          </van-pull-refresh>
            <!-- <div class="img1" v-else>
              <img  src="@/assets/img/[email protected]"/>
            </div> -->
              <div v-if="listconter.length==0" class="text1">暂无数据</div>
      </div>
      <div class="bottom_fixed">
            <!-- <div><van-checkbox @click="handeClick" v-model="checked">全选{{checked}}</van-checkbox></div> -->
            <div><van-checkbox  v-model="checked">全选{{checked}}</van-checkbox></div>
            <div class="sureBtn" @click="goChangePageindex" v-if="listBtn">
              确定
            </div>
            <div class="sureBtnDis" v-else>
              确定
            </div>
      </div>
  </div>
</template>
 data () {
    return {
      listconter:[{checkedItem:false},{checkedItem:false},{checkedItem:false},{checkedItem:false},{checkedItem:false},],
    };
  },
  computed:{
     checked: {
      get () {
//过滤返回列表checkedItem为false的值，说明没有选中,如果arr=0的话说明都选中了，返回true，否则全选checked为false。
        const arr = this.listconter.filter((item) => !item.checkedItem);
        if (arr.length === 0){
          return true;
        }else{
          return false;
        } 
      },
      set (value) {
        console.log(value)//选中设置的时候利用set方法给列表赋值为checked的值
        this.listconter.forEach(function (item) {
          item.checkedItem = value;
        });
      }
    },
  },

下面是第二种方法使用watch来监听：

<template>
  <div class="container_big">
    <inputSearch v-model="orderNumber" @searChList='searChList' class="headSearch"></inputSearch>
     <div class="title">
            <van-pull-refresh  v-if="listconter.length>0" v-model="refreshing"    @refresh="onRefresh" >
                  <van-list
                          v-model="loading"
                          :finished="finished"
                          finished-text="-我也是有底线的-"
                          @load="onLoad"
                          :immediate-check="false"
                        >
                      <div class="content" v-for="(item,index) in listconter" :key="index">
                        <div><van-checkbox v-model="item.checkedItem"></van-checkbox></div>
                        <div style="margin-left:9px;width: 100%;">
                          <div class="content_right">
                            <div class="content_right_1">
                             <img style="margin-right:6px" src="@/assets/img/[email protected]" />
                              <div>三巨头有限公司{{item.customerName}}</div>
                            </div>
                            <div class="content_right_2">
                              <div style="margin-right:10px"><img src="@/assets/img/[email protected]"/></div>
                              <div><img src="@/assets/img/[email protected]"/></div>
                            </div>
                          </div>
                          <div class="number">18982882829</div>
                          <div class="text">上海市青浦区华徐公路3011弄348号{{item.customerAddress}}</div>
                          <div class="content_bottom">
                            <span>本月500{{item.monthCount}}单</span>
                            <span>电子面单</span>
                            <span>报价单</span>
                          </div>
                        </div>
                      </div>
            </van-list>
          </van-pull-refresh>
            <!-- <div class="img1" v-else>
              <img  src="@/assets/img/[email protected]"/>
            </div> -->
              <div v-if="listconter.length==0" class="text1">暂无数据</div>
      </div>
      <div class="bottom_fixed">
             <div><van-checkbox @click="handeClick" v-model="checked">全选{{checked}}</van-checkbox></div> 
 
            <div class="sureBtn" @click="goChangePageindex" v-if="listBtn">
              确定
            </div>
            <div class="sureBtnDis" v-else>
              确定
            </div>
      </div>
  </div>
</template>
 data () {
    return {
      arr:[],
      checked:false,
      listconter:[{checkedItem:false},{checkedItem:false},{checkedItem:false},{checkedItem:false},{checkedItem:false},],
    };
  },
methods: {
      handeClick () {
      this.listconter.forEach((item)=>{
        item.checkedItem= this.checked
      })
    },
  },
  
   watch:{
    'listconter':{
      handler(newval,oldval){
         this.checked = newval.every((item) => item.checkedItem === true)
      },
      deep:true,
    },