vue.js实现的全选与全不选功能示例【基于elementui】

<el-checkbox v-model=\"checkAll\" @change=\"handleCheckAllChange\">全选</el-checkbox>
<tbody v-for=\"item in orderData\">
 <tr>
  <td class=\"order-num\" colspan=\"7\">
   <el-checkbox v-model=\"item.checkModel\" @change=\"handleCheckItemChange\" style=\"vertical-align:top;margin-top:20px;\"></el-checkbox>
   <div class=\"num\">
    <a href=\" :;\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >订单号：{{item.orderNumber}}</a>
    <p>商户单号：{{item.shopNumber}}</p>
   </div>
  </td>
  <td class=\"order-action\" colspan=\"2\">
   <a href=\" :;\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >查看详情</a>-<a href=\" :;\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >备注</a>-<a href=\" :;\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >加星</a>
  </td>
 </tr>
 <tr>
  <td>
   <div class=\"pic\">
    <img :src=item.orderPic alt=\"\">
   </div>
   <div class=\"info\">
    <a href=\" :;\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"external nofollow\" >{{item.name}}</a>
    <p>{{item.size}}</p>
    <p>商品来源：{{item.from}}</p>
   </div>
  </td>
  <td>{{item.number}}</td>
  <td>{{item.price}}</td>
  <td>-</td>
  <td>{{item.company}}</td>
  <td>
   <p>{{item.address}}</p>
   <p>({{item.phone}})</p>
  </td>
  <td>{{item.date}}<br />{{item.time}}</td>
  <td>{{item.state}}</td>
  <td>{{item.pay}}<br /><span v-if=\"item.postCost\">(运费：{{item.postCost}})</span></td>
 </tr>
</tbody>

checkAll:false,
checkedAllShops:[],
checkItemData:[],
orderData:[
 {
  checkModel:false,
  orderNumber:\'2017081618322542542\',
  shopNumber:\'2017081618322542542\',
  orderPic:\'../../../../static/images/realtimeprofile01.png\',
  name:\'【商城】贴轻松穴位艾灸贴\',
  size:\'5贴*盒\',
  from:\'本店商品\',
  number:\'10\',
  price:\'200.00\',
  company:\'蒂花之秀\',
  address:\'童话镇\',
  phone:\'12345678910\',
  date:\'2018-1-12\',
  time:\'09:30:00\',
  state:\'订单关闭\',
  pay:\'400.00\',
  postCost:\'10\'
 },{
  checkModel:false,
  orderNumber:\'2017081618322542542\',
  shopNumber:\'2017081618322542542\',
  orderPic:\'../../../../static/images/realtimeprofile01.png\',
  name:\'【商城】贴轻松穴位艾灸贴\',
  size:\'5贴*盒\',
  from:\'本店商品\',
  number:\'10\',
  price:\'200.00\',
  company:\'蒂花之秀\',
  address:\'童话镇\',
  phone:\'12345678910\',
  date:\'2018-1-12\',
  time:\'09:30:00\',
  state:\'订单关闭\',
  pay:\'400.00\',
  postCost:\'10.00\'
 }
]

handleCheckAllChange(val){
 this.orderData.map((item,i)=>{
  item.checkModel = val;
 })
},
handleCheckItemChange(val){
 for(let i = 0,l = this.orderData.length;i < l;i ++){
  if(this.orderData[i].checkModel !== val){
   this.checkAll = false;
   return;
  }
 }
 this.checkAll = val;
}