关于iview CheckboxGroup 使用二维数组的操作姿势！

1、官方的demo 都是一维数组，但是实际开发中经常都是二维数组，对总结如下

说明：radio 和 checkbox 都可以使用如下方式，可以愉快的使用二维数组了

上代码：

html

<FormItem label="可用充值项目" prop="amount">
          <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
            <Checkbox
              :indeterminate="indeterminate"
              :value="checkAll"
              @click.prevent.native="handleCheckAll">全选</Checkbox>
          </div>
          <CheckboxGroup v-model="form.rechargeItem" @on-change="checkAllGroupChange">
            <Checkbox :label="item.id"  :key="item.id" v-for="(item,index) in checkAllGroup">{{item.name}}</Checkbox>
          </CheckboxGroup>
</FormItem>

js

handleCheckAll () {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;

      if (this.checkAll) {
        //全选，将id全部取出复制到 CheckboxGroup v-model="form.rechargeItem" 即可
       var map = []
        this.checkAllGroup.forEach(res=>{
          map.push(res.id)
        })
        this.form.rechargeItem = map;
      } else {
        //反选，没啥好说的，清空 CheckboxGroup v-model="form.rechargeItem" 即可
        this.form.rechargeItem = [];
      }
    },
    checkAllGroupChange (data) {
      if (data.length === 3) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else {
        this.indeterminate = false;
        this.checkAll = false;
      }
    },

data

form: {
      rechargeItem: [] //用于v-model 绑定的数组
},      
indeterminate: true,
checkAll: false,
// 如下list 通过后端返回即可
checkAllGroup: [{
        id:1,
        name:"充100送20"
      },{
        id:2,
        name:"充1000送200"
      },{
        id:3,
        name:"充10000送2000"
}],

效果：