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