看一下这段代码
<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也被选中，原因就是绑定了同一个值，并且这个值不是一个数组，绞尽脑汁，在大神的帮助下使用了二维数组才解决。
// 第一次码文，还不太熟悉，各位看官见笑
