1. 程式人生 > >vue中復選框全選與反選

vue中復選框全選與反選

事件 狀態 dex 主要部分 過濾 lis 反選 觸發事件 value

  html主要部分: 

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

  初始化selectList = [],checkboxList = [‘蘋果‘, ‘橡膠‘, ‘梨‘, ‘桃子‘]。

  首先說全選事件,這個比較好弄。就是每次觸發事件的時候先清空selectList,然後將checkboxList的值賦值給selectList就行了。

  

  反選事件。所謂反選就是先判斷如果有選中的則將其狀態變為未選中,未選中則將其狀態變為選中。

  今天偶然發現一個很好用的方法,就是借鑒兩個數組,判斷是否有相同元素,然後去重這種思路來解決反選問題。

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 }

  

vue中復選框全選與反選