三层v-for嵌套的数据传递问题，动态获取不行

看一下这段代码

<el-collapse
                v-model="item.powerDeviceName"
                @change="activeNames_two"
                v-for="(item, index1) in taskStep2Data"
                :key="item.powerDeviceId"
              >
                <div v-for="(item2, index) in item.monitorDeviceInfos" :key="item2.monitorDeviceId">
                  <el-collapse-item
                    v-show="item2.monitorDeviceId != 3"
                    :title="item2.monitorDeviceName"
                    :name="item2.monitorDeivceId"
                  >
                    <el-checkbox-group
                      v-model="typeIdDataChecked_two[index1][index]"
                      @change="handleCheckedCitiesChange_two"
                    >
                      <el-checkbox
                        style="display: block; text-align: left;height: 39px;line-height:39px;"
                        class="ckeckbox_style"
                        v-for="item3 in item2.recognitionTypes"
                        :title="item3"
                        :name="item2.monitorDeviceId"
                        :label="item3+'a'+item2.monitorDeviceId+'a'+item.powerDeviceId+'a'+item2.monitorDeviceType"
                        :key="item3"
                      >{{item3 | transformDevice}}</el-checkbox>
                    </el-checkbox-group>
                  </el-collapse-item>
                </div>
              </el-collapse>
复制代码

这段代码实现的是渲染出一个相似这样的结构

点击第三层结构的表计能够实现获取到最外一层的id值，上一层的id，和自身的id，并将数据整合发送给后台

$nbsp;最开始我使用的是vue中的ref来获取对应结构的dom达到获取id的做用， 但是发现，由于v-for的缘故，每个组件都获取到了相同的name， 因此致使ref也没法达到最终的效果。 左思右想一下午，直到次日早上来上班灵光一现。

将id值在渲染阶段就绑定到最里层的checkbox上，经过@change获取到对应的label值，这样不就解决了，动态获取的难题，一步到位。

而后还有另外一个问题，那就是el-checkbox-group 中的v-model绑定问题，开始就是点击一个checkbox，另外一个el-collapse-item下的checkbox也被选中，缘由就是绑定了同一个值，而且这个值不是一个数组，绞尽脑汁，在大神的帮助下使用了二维数组才解决。

// 第一次码文，还不太熟悉，各位看官见笑