知識點：

1 v-model：監聽input內容

2 watch:監聽屬性方法

3 頁面初始化呼叫函式 mounted

一：html元素

<table id="userTable" class="table table-bordered table-hover">
  <thead>
     <tr>
         <th><input type="checkbox" name='check' v-model="checkedAll" @change="changeState"></th>
         <th>編號</th>
         <th>反饋使用者</th>
         <th>手機號</th>
         <th>反饋時間</th>
         <th>操作</th>
     </tr>
     </thead>
     <tbody>
	     <template v-for="item in tableList">
	         <tr>
	             <td><input type="checkbox" name='check' v-model="checkModel" :value="item.id"></td>
	             <td>{{ item.nu }}</td>
	             <td>{{ item.user.nickname }}</td>
	             <td>{{ item.user.phone}}</td>
	             <td>{{ item.times}}</td>
	             <td>
	                 <button class="btn btn-default btn-xs" v-link="{ name: 'FeedbackDetail', query: { id: item.id} }"> 檢視</button>
	                 <button class="btn btn-danger btn-xs" @click="deleteQuestion(item.id)">刪除</button>
	             </td>
	         </tr>
	     </template>
     </tbody>
     <tfoot>
	     <tr>
	         <td colspan="12">
	             <button class="btn btn-danger btn-xs" @click="batchRemoval()">批量移除</button>
	         </td>
	     </tr>
     </tfoot>
 </table>
 

如圖：

實現思路

1 v-model 一個收集所有input（除全選框外）陣列checkModel ，vue會動態將其checked為true的input的value值存入陣列checkModel裡

2 watch函式來監聽checkModel 屬性，當其長度==input元素時 全選按鈕選中 否則取消

3 全選按鈕v-model checkAll 屬性來顯示當前選中狀態 click事件裡 當checkAll為true時 全選 所有input按鈕被選中也就是checkModel的遍歷存入其value值

完整程式碼：

export default {
        name: "Feedback",
        data(){
            return {
                tableList: [], //所有資料
                checkModel: [], //批量選擇id
                checkedAll: false, //是否是全選
            }
        },
        methods: {
            //全選
            changeState(){
                this.checkModel = [];
                if(this.checkedAll){
                    for(var i in this.tableList){
                        this.checkModel.push(this.tableList[i].id)
                    }
                }
                console.log(this.checkModel)
            }
        },
        watch:{
            checkModel :{
                handler (){
                    if(this.checkModel.length == this.tableList.length){
                        this.checkedAll = true
                    }else{
                        this.checkedAll = false
                    }
                },
                deep: true
            }
        }
    }