vue实现全选功能

vue实现全选功能

全选按钮

 <tr>
               <td colspan="8">
                  姓名 <input type="text" name="name" v-model="like.name">
                   班级：
                   <select v-model="like.sid">
                       <option v-for="(v,index) in classes":value="v.cid">{{v.cname}}</option>
                   </select>
                   电话：<input type="text" name="telephone" v-model="like.telephone">
                   <button v-on:click="findName()">查询</button>
               </td>
           </tr>
           <tr>
               <td>
                   序列号码
                  <button @click="checkAll" v-model="checked">全选</button>
               </td>
               <td>客户姓名</td>
               <td>客户性别</td>
               <td>身份证号</td>
               <td>开户时间</td>
               <td>客户电话</td>
               <td>客户单位</td>
               <td>数据操作</td>
           </tr>
           <tr v-for="(item,index) in list">
               <td>
                   <input type="checkbox" v-model="checkModel" :value="item.id">
               </td>
               <td>{{item.name}}</td>
               <td>
                   <div v-if="item.sex==1">
                       男
                   </div>
                   <div v-else>
                       女
                   </div>
               </td>
               <td>{{item.card}}</td>
               <td>{{item.birthday}}</td>
               <td>{{item.telephone}}</td>
               <td>{{item.classes.cname}}</td>
               <td>
                   <button  v-on:click="del(item.id,index)">删除</button>
                   <button  v-on:click="update(item.id)">修改</button>
               </td>
           </tr>

vue代码

<script type="text/javascript">
    var vm=new Vue({
        el: "#root",
        data: {
        	checked:false, //是否全选
            checkModel:[] //双向数据绑定的数组，我是用的id
            },
    watch:{
            checkModel(){
                if(this.checkModel.length==this.list.length){
                    this.checked=true;
                }else{
                    this.checked=false;
                }
            }
        },
   methods: {
            checkAll(){
                if(this.checked){
                    this.checkModel=[];
                }else{
                    this.list.forEach((item)=>{
                        if(this.checkModel.indexOf(item.id)==-1){
                            this.checkModel.push(item.id)
                        }
                    })
                }
            },