三層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也被選中，緣由就是綁定了同一個值，而且這個值不是一個數組，絞盡腦汁，在大神的幫助下使用了二維數組才解決。

// 第一次碼文，還不太熟悉，各位看官見笑