<CheckboxGroup v-model="form.permisson" v-for="(val,index) in menuList" :key="index"  @on-change="checkAllGroupChange">
                        <Checkbox :label="val.moduleId" @click.native="checkGroup($event)">
                            <span>{{val.moduleUiName+val.moduleId}}</span>
                        </Checkbox>
                    <template v-for="(vv, kk) in val.list">
                            <Checkbox :key="kk" :label="vv.moduleId" @click.native="checkGroup($event)">
                                <span>{{vv.moduleUiName+vv.moduleId}}</span>
                            </Checkbox>
                        <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>
                    </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">
                        <input type="checkbox" :value="val.moduleId" v-model="val.isHaveAuth" @change="checkGroup(val)">
                        <label>{{val.moduleUiName+val.moduleId}}</label>
                    <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 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>
                    </template>
</template>
<script>
  checkGroup(data){
      console.log(data.moduleId)
</script>