vue多选框checked得动态渲染，查询

需求：多选框内容根据后台查询得，并再每一次选中后调用查询接口，查询列表

最终效果图

后台返回数据得格式：

说明：langname是标签名，children里面得labDATAPARAM是标签值，

前端代码如下： html部分

    ` <el-form ref="form" :model="form" label-width="180px">
          <el-form-item :label="lab.lagMngName" v-for="lab in labs" :key="lab" >
            <el-checkbox-group v-model="labq" @change="handleCheckedCitiesChange" >
                              <el-checkbox v-for="city in lab.children" :label="city" :key="city">{{city.labDATAPARAM}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>`
        
        
js得data部分;
            `  
              labs:[{
      name:'标签A: ',
      lab:['男','女']},
      {name:'标签B：',
      lab:['20岁以下','20-30','30-40']},
       {name:'标签C：',
      lab:['高中及以下','大专','本科','硕士及以上']}
  ],
  cities:[],
  
            `
            
         js得methods方法部分：
        `       
            // 多选框传值
  handleCheckedCitiesChange(val){
      console.log(val)
      this.lab=val
      this.getDataList()  
},

// 查询标签值
  getBqList() {
  this.$http({
    url:this.$http.adornUrl( "/dbcenter/LabMngDataruleVO/getAllLabelList.do"), 
    method: "get",
    params: this.$http.adornParams({
      labDataruleDatableid:this.labDataruleDatableid
    }),
  }).then(({ data }) => {
    data = JSON.parse(data);
    let datas =  JSON.parse(data.msg)
      console.log(datas,999)
      this.labs=datas
      console.log(datas,888)
      this.labname=datas.labNAME
      console.log(this.labname)
      // for (let index = 0; index < datas.length; index++) {
      //      this.lab = datas[index].children;
      //   console.log(this.lab,666)
      // }
  });
},

            `
     ps:如果后台能按照前端要求得数据格式返回值得话会很好写
     
     
     不过也无所谓了，大不了前台再处理数据变成自己想要得放到页面，这是本人第一次写页面，也想了很久