<template lang="html">

    <div class="">

          <div class="" v-for="(item,i) in newArr" :key="i">

              <p>{{item.name}}</p>

              <el-checkbox-group v-model="labelCheck[i]"  @change="handleChange()">

                <el-checkbox

                  v-for="city in item.children"

                  :label="city.vModel"

                  :key="city.vModel"

                >{{city.lable}}

                </el-checkbox>

            </el-checkbox-group>

          </div>

          <el-button @click="postForm()">提交</el-button>

    </div>

</template>

<script>

export default {

    data(){

        return{

            labelCheck:[[],[],[],[]],

            vModel:[],

            flowUseres:[],

            fieldes:[],

            newArr:[]

        }

    },

    methods:{

        getMoudleUser(){

          //let Id=this.$route.query.id;

          let Id='3a5ce584-3f31-44eb-940b-4782b3d89aad';

          this.$axios.get('api/api/CustomizeForm/GetFormRole?id='+Id).then((res)=>{

                this.flowUseres=res.data.data.flowUseres;

                this.fieldes=res.data.data.fieldes;

                for (var i = 0; i <this.flowUseres.length; i++) {

                var vote = {};

                    vote.children=this.fieldes;

                    vote.code = this.flowUseres[i].code;

                    vote.name = this.flowUseres[i].name;

                    vote.editable=this.flowUseres[i].editable;

                    vote.hiddentList=this.flowUseres[i].hiddentList;

                    this.newArr.push(vote);

            }

                console.log(this.newArr)

          },function(err){

          });

        },

        postForm(){

            console.log(this.labelCheck)

            console.log(this.vModel)

        },

        handleChange(){

            console.log(this.labelCheck)

        }

    },

    mounted(){

        this.getMoudleUser();

    }

}

</script>

<style lang="css" scoped>

</style>

备注:

1.newArr数据结构如下:

newArr=[ {

code: "directLeaderApprove"

editable: null

hiddentList: null

name: "直属领导审批",

children:[{

lable: "请假单"

vModel: "qingjia"

}]

}

];

因为是双层循环所以定义了一个二维数组接收勾选的值。之所以在labelCheck里面定义4个空数组，是因为newArr这个数组实际是有4组数据。

所以当里面有多少个数据时labelCheck就要定义几个空的二维数组。

比如在getMoudleUser方面中的for循环中加上

var kongArr=[];

this.labelCheck.push(kongArr);