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;
            }
        },
})