vue.js簡單實現checkbox全選,反選,多選
阿新 • • 發佈:2018-12-14
1.html
<table> <tr> <th class=""> <div class=""> <input type="checkbox" id="checkAll" @click="clickCheckAll()" v-model="checkAll"> 全選 </div> </th> </tr> <tr v-for="(item,index) in tableList"> <td> <input type="checkbox" name="checkBoxs" v-model="item.isChecked" @click="clickCheckbox(item,item.id)"> </td> </tr> </table>
2.js
var app= new Vue({ el: "#iframeRegCheck", data: { tableList:[], //表格陣列 isChecklist:[], //被選中的 checkAll:false //全選的v-model值 }, mounted:function (){ this.initTable(); }, methods: { initTable:function () { var that = this; $.ajax({ type: 'post', url: "yxChecklistController.do?getDateRectification", dataType: 'json', data: { "id":'${id}', "tag":that.tag }, success: function (data) { for (var i = 0; i < data.length; i++) { var objData= data[i]; objData.isChecked = false; //新增是否選中欄位,用來控制選擇情況 that.tableList.push(objSta) } }, error:function (e) { alert('獲取內容失敗,請檢查網路情況') } }); }, //全選 反選 clickCheckAll:function () { var _this = this; _this.checkAll = !_this.checkAll; //取反 for (var i=0;i<_this.tableList.length;i++){ //迴圈所有checkbox,新增選中狀態 var checkedData = _this.tableList[i]; checkedData.isChecked = _this.checkAll; } }, //點選單個複選框 clickCheckbox:function (item,id) { var _this = this; item.isChecked = !item.isChecked; if(item.isChecked){ _this.isChecklist.push(id) //隨便放個引數到陣列記錄選中數量 }else { var last = _this.isChecklist.length-1; _this.isChecklist.splice(last,1); //取消選中時刪掉陣列最後一個 } if( _this.isChecklist.length == _this.tableList.length){ //比較選中的陣列數量和總資料的數量來決定全選是否選中 _this.checkAll = true; }else { _this.checkAll = false; } }, })