vue自写全选和取消全选功能，带换一批功能

1.html

<div class="inereContent_style">
   <div class="box_check">
      <div>
        <nut-checkbox
          v-model="checkedInterest"
          @change="checkAllChange"
          size="small"
          :animation="false">
          全选<span class="checkedNumBox">（<span class="checkedNum" :class="{'haveInt': userInterestIds.length > 0}">{{userInterestIds.length}}</span>/<span class="totleChecked">{{total}}</span>）</span>
        </nut-checkbox>
      </div>
        <span v-if="totalPage > 1" class="changeBox" @click="initInterestData">
          <img src="~@/images/user/changePage.png" class="">
          换一批
        </span>
      </div>
       <div class="box_modal">
         <div class="box_comStyle" v-for="(interest, index) in interests" :key="interest.id">
           <div v-if="index < 12" class="box_bgWidth" :data-id="interest.id" v-bind:class="{'currentIndex' : chooseNum==index}" ref="liId" data-checkState="un_check">
             <div @click="checkInterest(interest.id, index, $event)" class="defulBox">
               {{ interest.name }}
             </div>
           </div>
         </div>
       </div>
     </div>

2.dom

data () {
      return {
        userInterestIds: [],
        checkedInterest: false,
        interests: [],
        dragNum: 1,
        changBgColor: ['box_one', 'box_two', 'box_thire', 'box_four', 'box_five', 'box_six', 'box_seven', 'box_eight', 'box_nine'],
        page: 0,
        pageSize: 12,
        count: 0,
        total: 0,
        totalPage: 0,
        checkedState: '',
        uncheckedState: ''
      }
    },

checkAllChange () {
   this.checkAllInterest()
  },
  //全选取消全选
    checkAllInterest () {
      if (this.isAllInteresetChecked) {
        $('.box_bgWidth').removeClass('currentIndex')
        this.interests.forEach((interest) => {
          var idIndex = this.userInterestIds.indexOf(interest.id)
          if (idIndex >= 0) {
            this.userInterestIds.splice(idIndex, 1)
          }
        })
        // this.checkedInterest = false
      } else {
        $('.box_bgWidth').addClass('currentIndex')
        this.interests.forEach((interest) => {
          var idIndex = this.userInterestIds.indexOf(interest.id)
          if (idIndex < 0) {
            this.userInterestIds.push(parseInt(interest.id))
          }
        })
        // this.checkedInterest = true
      }
    },
    //单点选中和取消
    checkInterest (id, index, e) {
      // this.chooseNum = index
      var idIndex = jQuery.inArray(parseInt(id), this.userInterestIds)
      // console.log(this.$refs.liId[index].className)
      var getIntLength = $('.box_bgWidth').length
      if(this.$refs.liId[index].className == 'box_bgWidth'){
        this.$refs.liId[index].className = 'box_bgWidth currentIndex';// 添加类
      }else{
        this.$refs.liId[index].className = 'box_bgWidth';// 选中再取消的情况
      }
      if (idIndex >= 0) {
        this.userInterestIds.splice(idIndex, 1)
        this.checkedInterest = false
      } else {
        this.userInterestIds.push(parseInt(id))
      }
      if (this.userInterestIds.length == getIntLength) {
        this.checkedInterest = true
      }
    },

//换一批
async initInterestData () {
  // console.log($('.box_bgWidth').index($('.currentIndex')))
  let self = this
  var nextPage = this.page + 1
  if (nextPage > this.totalPage) nextPage = 1
  let res = await getInterest(nextPage, this.pageSize)
  if (res.ret_code === 200) {
    self.interests = res.result.data
    self.page = nextPage
    self.count = self.interests.length
    self.total = res.result.total ? res.result.total : self.count
    let getPage = Math.ceil(res.result.total/12)
    self.totalPage = getPage
    var arrCont = self.isContained(self.interests, self.userInterestIds);
    if (self.isAllInteresetChecked == false) {
      self.checkedInterest = false
    } else {
      self.checkedInterest = true
    }
    setTimeout(()=>{
      let intList = $('.box_bgWidth')
      for (var j = 0; j < self.userInterestIds.length; j++) {
        let getCheckId = self.userInterestIds[j]
        intList.each(function (i,item) {
          let curr = $(this)
          let getId = curr.attr('data-id')
          // console.log(getCheckId)
          if (getCheckId == getId) {
            curr.addClass('currentIndex')
          }
        });
      }
    },20)
    // this.totalPage = parseInt(this.total % this.pageSize === 0 ? this.total / this.pageSize : this.total / this.pageSize + 1)
  } else {
    this.$dialog({lockBgScroll:true, noCancelBtn: true, content: res.ret_msg, onOkBtn(event) {  //确定按钮点击事件
      this.close(); //关闭对话框
    }});
    // this.gb.msgToast('error', res.ret_msg)
  }
},

isAllInteresetChecked: function () {
  var choosed = true
  this.interests.forEach((interest) => {
    choosed = choosed && jQuery.inArray(parseInt(interest.id), this.userInterestIds) >= 0
  })
  return choosed
},

3效果