诉求：在做后台系统用户组权限这块，后台要求点击多选框时把当前ID传过去

image.png

但ivew Checkbox组件文档写的不全，于是研究了一番

<CheckboxGroup v-model="form.permisson" v-for="(val,index) in menuList" :key="index"  @on-change="checkAllGroupChange">
                    <b>
                        <Checkbox :label="val.moduleId" @click.native="checkGroup($event)">
                            <span>{{val.moduleUiName+val.moduleId}}</span>
                        </Checkbox>
                    </b>
                    <template v-for="(vv, kk) in val.list">
                        <p>
                            <Checkbox :key="kk" :label="vv.moduleId" @click.native="checkGroup($event)">
                                <span>{{vv.moduleUiName+vv.moduleId}}</span>
                            </Checkbox>
                        </p>
                        <p v-if="vv.list" class="last">
                            <Checkbox v-for="(v, i) in vv.list" :key="i" :label="v.moduleId" @click.native="checkGroup($event)">
                                <span>{{v.moduleApiName+v.moduleId}}</span>
                            </Checkbox>
                        </p>
                    </template>
</CheckboxGroup>

<script>
  checkAllGroupChange (data) {
      console.log(data)
  }
  checkGroup(e){
      console.log(e.target.value) //value就是label绑定的value
  }
</script>

CheckboxGroup v-model绑定所有勾选项，格式为数组、on-change事件可以获取当前所有勾选项，格式为数组
Checkbox用@click.native绑定点击事件(直接用@click无反应)，然后在事件里进行相应的操作，把id传给后台

此时一定要接着往下看

但是写的过程中发现了iview的bug,就是CheckboxGroup v-model绑定的数组渲染时后出现错误，会勾选错误，于是只能放弃iview用原始的checkbox

<template v-for="(val,index) in menuList">
                    <b>
                        <input type="checkbox" :value="val.moduleId" v-model="val.isHaveAuth" @change="checkGroup(val)">
                        <label>{{val.moduleUiName+val.moduleId}}</label>
                    </b>
                    <template v-for="(vv, kk) in val.list">
                        <p class="second">
                            <input type="checkbox" :value="vv.moduleId" v-model="vv.isHaveAuth" @change="checkGroup(vv)">
                            <label>{{vv.moduleUiName+vv.moduleId}}</label>
                        </p>
                        <p v-if="vv.list" class="last">
                            <span v-for="(v, k) in vv.list">
                                <input type="checkbox" :value="v.moduleId" v-model="v.isHaveAuth" @change="checkGroup(v)">
                                <label>{{v.moduleApiName+v.moduleId}}</label>
                            </span>
                        </p>
                    </template>
</template>
<script>
  checkGroup(data){
      console.log(data.moduleId)
  }
</script>

用原生checkbox就灵活多了，加@click,@change都可以，而且可以把数组直接传入方法里，也不需要$event获取
然后渲染勾选项直接v-model绑定就好，不用再处理为数组

写到这里请让我说一声iview垃圾！！！
对了说一句项目里用的iview2.x by the way