分页下的全选组件

<template>
    <mu-dialog class="selDialog" width="750px" :open.sync="isShowFriDialog">
      <mu-sub-header>选择好友<span style="float: right; color: #3279e5" @click="submitFriList">确定</span></mu-sub-header>
      <!-- <mu-pagination v-if="friAllCount>=showCount" small :page-size="showCount" :total="friAllCount" :current.sync="currentPage" @change="showFriList"></mu-pagination> -->
      <mu-sub-header>
        <mu-checkbox v-model="checkedAll" label="全选" @change="changeState"></mu-checkbox>
      </mu-sub-header>
      <mu-list v-loading="friLoading" data-mu-loading-color="#3279e5" data-mu-loading-overlay-color="rgba(0, 0, 0, .12)">
        <div class="list-wrapper" v-for="(vo, index) in friendsList[showCount]" :key="index">
          <mu-list-item avatar button :ripple="false" >
            <mu-list-item-action>
              <mu-checkbox v-model="checkFriModel" :value="vo.friendWechatyId" @change="RecordFri($event)"></mu-checkbox>
            </mu-list-item-action>
            <mu-list-item-action>
              <mu-avatar style="box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14), 0 1px 14px 0 rgba(0,0,0,.12);border: 2px solid;">
                <img :src="vo.friendAvatar || ''" />
              </mu-avatar>
            </mu-list-item-action>
            <mu-list-item-title>{{vo.friendAlias || vo.friendName}}</mu-list-item-title>
          </mu-list-item>
          <mu-divider></mu-divider>
        </div>
      </mu-list>
    </mu-dialog>
</template>
<script>
import { getBotContacts } from '@/api/bot'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      friendsList: [],
      checkedAll: false,
      checkFriModel: [],
      showCount: 500,
      friAllCount: 0,
      friLoading: false,
      currentPage: 1,
      isShowFriDialog: false
    }
  },
  watch: {
    checkFriModel: {
      handler () {
        console.log(this.checkFriModel)
        let newFri = []
        if(!Array.prototype.subsetTo){
          Array.prototype.subsetTo=function(arr){
            return this.every(v=>arr.includes(v))
          }
        }
        this.friendsList[this.showCount].forEach(item=>{
            newFri.push(item.friendWechatyId)
        })
        if(newFri.subsetTo(this.checkFriModel)) {
          this.checkedAll = true
        } else {
          this.checkedAll = false
        }
      },
      deep: true
    }
  },
  // props: ['isShowFriDialog'],
  computed: {
    ...mapGetters(['userId', 'botId'])
  },
  methods: {
     // 好友全选
    changeState(e) {
      if (this.checkedAll == true) {
        // this.checkFriModel = []
        this.friendsList[this.showCount].forEach(item=>{
          this.checkFriModel.push(item.friendWechatyId)
        })
      } else {
        for(var i=0;i<this.friendsList[this.showCount].length;i++){
          for(var j=0;j<this.checkFriModel.length;j++){
            if(this.checkFriModel[j]==this.friendsList[this.showCount][i].friendWechatyId){
                this.checkFriModel.splice(j,1);
                j--;
            }
          }
        }
      }
    },
    submitFriList() {
      this.$emit('submitFriList', this.checkFriModel)
    },
    RecordFri(data) {
      this.friChecked = data
    },
    showFriList() {
      console.log(this.botId)
      this.isShowFriDialog = true
      this.friLoading = true
      if(!this.botId) return
      getBotContacts({botId: this.botId, pageSize: 5000, pageNum: this.currentPage}).then(res=>{
        if (res && res.status === 'success') {
          var newFriList = []
          this.friendsList[this.showCount] = res.data.botContactList
          this.friendsList[this.showCount].forEach(item=>{
             newFriList.push(item.friendWechatyId)
          })
          if(!Array.prototype.subsetTo){
            Array.prototype.subsetTo=function(arr){
              return this.every(v=>arr.includes(v))
            }
          }
          this.checkedAll = newFriList.subsetTo(this.checkFriModel)

          console.log(this.friendsList.length)
          // this.friendsList = this.friendsList.concat(res.data.botContactList)
          this.friAllCount = res.data.allCount  
          this.friLoading = false
        }
      })
    },
    hidden() {
      this.isShowFriDialog = false
    }
  }
}
</script>