antd-vue 复选框实现全选（跨页）

官方文档给了全选实例，说实话够用了，但是最近我新做了一个需求是跨页全选，打个比方，我在第一页全选了12条内容，然后到第二页拉新数据了，在选择第二页的一部分，然后我再回到第一页，取消掉几个，再来到第二页，全部选中，要实现的效果：首先选中的依旧选中，本页数据全部被选中时，全选框被选中。其实还好，但是我逻辑思维能力有点一般般，所以我还是写博客记下来吧，省的下次再用到相同思路。

data:(){
	choosePicArr:[],
	plainOptions:[],//本页的所有checkbox的value
	checkAll :false, //全选框状态
	currentPagePick:[]//当前页面被选中的checkbox
},
methods:{
//每个复选框的绑定事件
 onChange(choosePicArr){
      var currentPickData = choosePicArr.filter(ele =>{ return this.plainOptions.includes(ele)})
      this.checkAll = (currentPickData.length === this.plainOptions.length);
      this.currentPagePick = this.$tool.clone(currentPickData)
    },
    //全选框的绑定事件
    onCheckAllChange(e) {
      var temp = this.choosePicArr
      Object.assign(this, {
        choosePicArr: e.target.checked ? this.plainOptions : [],
        checkAll: e.target.checked,
      })
      this.currentPagePick =this.$tool.clone(this.choosePicArr)
      if(this.choosePicArr.length){
        this.choosePicArr.push(...temp)
      }else{
        this.choosePicArr = temp.filter(item => this.plainOptions.indexOf(item) == -1);
      }
    },
//判断是否本页被全部选中
    IsCheckAll(){
      for(let i = 0;i<this.plainOptions.length;i++){
        if(!this.choosePicArr.includes(this.plainOptions[i])){
          return false
        }
      }
      return true
    }
  }

//template
<a-checkbox :checked="checkAll" @change="onCheckAllChange">本页全选</a-checkbox>
<a-checkbox-group @change="onChange" v-model="choosePicArr">
	 <a-list
         :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 6, xxl: 6 }"
         :dataSource="images"
     >
       <a-list-item slot="renderItem" slot-scope="item">
       		<a-checkbox :value="item.id"></a-checkbox>
              <a-card> </a-card>
      </a-list-item>
   </a-list>
</a-checkbox-group>