<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>