iview checkbox全选

需求：

1. 当点击全选checkbox时，所有列表商品选中，
2. 当列表商品中某一项取消时，全选checkbox变成半选(不是全选)，重新点击后，再次变为全选

环境：

vue+vue-cli+iview
iview checkbox链接

效果图：

全选状态 半先状态

布局：

<template>
  <div class="header-btns">
     <Checkbox v-model="checkedAll" @on-change="selectCheck(orderList)">全选</Checkbox>
     <button size="small" class="btn btn-primary btn-sm" @click="mergePayClick">合并付款</button>
   </div>
   <span>
     <Checkbox v-model="order.checkedSingle" @on-change="selectSingCheck(order,orderList)" style="padding-top: 8px;width: 10px"></Checkbox>
   </span>
<template/>

逻辑：

export default {
  data(){
    checkedAll: false,
    checkedSingle: false,
    orderList: []
  }
  methods:{
    //全选
      selectCheck(orderList) {
        for (var i = 0; i < orderList.length; i++) {
          orderList[i].checkedSingle = this.checkedAll;
        }
      },
    //单选
      selectSingCheck(order, orderList) {
        //订单列表中某一项没有选中，那么就是半选
        if (order.checkedSingle == false) {
          this.checkedAll = false;
        } else {
          for (var i = 0; i < orderList.length; i++) {
            //循环到某一项没有选中时，那么就是半选，否则是全选
            if (!orderList[i].checkedSingle) {
              this.checkedAll = false;
              return
            } else {
              this.checkedAll = true;
            }
          }
        }
      }
  }
}