vue中复选框全选与反选

时间 2019-11-06 标签 vue 中复选框全选反选

　　html主要部分：　html

<template v-for="(item, index) in checkboxList">
　　<input type="checkbox" v-model="selectList" :value="item">
</template>

　　初始化selectList = []，checkboxList = ['苹果', '橡胶', '梨', '桃子']。数组

　　首先说全选事件，这个比较好弄。就是每次触发事件的时候先清空selectList，而后将checkboxList的值赋值给selectList就好了。this

　　反选事件。所谓反选就是先判断若是有选中的则将其状态变为未选中，未选中则将其状态变为选中。spa

　　今天偶然发现一个很好用的方法，就是借鉴两个数组，判断是否有相同元素，而后去重这种思路来解决反选问题。code

const _this = this
let checkboxList = _this.checkboxList 
let selectList = _this.selectList
let tempArr1 = []
let tempArr2 = []
if (!_this.selectList.length) {
   _this.selectList = _this.checkboxList 
} else {
  for (let i = 0, len = selectList.length; i < len; i ++) {
   tempArr1[selectList[i]] = true    //将数selectList中的元素值做为tempArr1中的键，值为true
  }
  for(var j=0, lenj = checkboxList.length;j < lenj;j++){
   if(!tempArr1[checkboxList[j]]){
    tempArr2.push(checkboxList[j]); // 过滤checkboxList与selectList中相同的元素
   }
  }
  _this.selectList = tempArr2 
}