vue.js+element实现全选反选 

  1 <template>
  2   <div>
  3     <div v-for="(item,index) in List" :key="index">
  4       <div>
  5         <el-checkbox  v-model='checkArr' :label=item.id  @change="changevalue"></el-checkbox>
  6         <span>{{item.name}}</span>
  7       </div>
  8       <table>
  9       </table>
 10     </div>
 11     <el-checkbox v-model='cheackAllChecked' @change='checkAllFun'>全选</el-checkbox>
 12     <span @click="reverseChecked">反选</span>
 13   </div>
 14 </template>
 15 
 16 <script>
 17 export default {
 18   data() {
 19     return {
 20       List: [
 21         {
 22           id: "1",
 23           name:'香蕉'
 24         },
 25         {
 26           id: "2",
 27           name:'苹果'
 28         },
 29         {
 30           id: "3",
 31           name:'橙子'
 32         },
 33         {
 34           id: "4",
 35           name:'鸭梨'
 36         },
 37         {
 38           id: "5",
 39           name:'葡萄'
 40         }
 41       ],
 42       cheackAllChecked: false,
 43       checkArr: [],
 44       checkCompleteArr: []
 45     };
 46   },
 47   methods: {
 48     //实现全选
 49     checkAllFun() {
 50       var _this = this;
 51       this.checkArr = [];
 52       if (this.cheackAllChecked) {
 53         this.List.forEach(function(item, index) {
 54           if (index >= 0) {
 55             _this.checkArr.push(item.id);
 56           }
 57         });
 58       }
 59     },
 60     //实现反选
 61     reverseChecked() {
 62       var changeArr = [];
 63       this.List.forEach(function(item, index) {
 64         if (index >= 0) {
 65           changeArr.push(item.id);
 66         }
 67       });
 68       this.removeByValue(changeArr, this.checkArr);
 69     },
 70     //反选过滤函数
 71     removeByValue(changearr, checkarr) {
 72       var _this = this;
 73       for (var j = 0; j < checkarr.length; j++) {
 74         for (var i = 0; i < changearr.length; i++) {
 75           if (changearr[i] === checkarr[j]) {
 76             changearr.splice(i, 1);
 77             break;
 78           }
 79         }
 80       }
 81       this.checkArr = changearr;
 82       if (changearr.length <= _this.checkCompleteArr.length) {
 83         this.cheackAllChecked = false;
 84       }
 85       if (changearr.length === _this.checkCompleteArr.length) {
 86         this.cheackAllChecked = true;
 87       }
 88     },
 89     //选项的change事件
 90     changevalue() {
 91       var _this = this;
 92       if (this.checkArr.length <= _this.checkCompleteArr.length) {
 93         this.cheackAllChecked = false;
 94       }
 95       if (this.checkArr.length === _this.checkCompleteArr.length) {
 96         this.cheackAllChecked = true;
 97       }
 98     }
 99   },
100   //全选或反选用到的完整数组值
101   mounted() {
102     var _this = this;
103     this.List.forEach(function(item, index) {
104       if (index >= 0) {
105         _this.checkCompleteArr.push(item.id);
106       }
107     });
108   }
109 };
110 </script>

 

posted @ 2018-12-21 14:51  安静940  阅读(4862)  评论(0)    收藏  举报