v-for 嵌套使用

需求如下图  ： 多个复选框 checkbox 需要获取相应的数据  ，所以需要两个v-for来循环  ，一个用来获取有几个checkbox ，一个用来获取checkbox里的数据， checkbox用的element-ui 里的组件

---

html：

<el-form-item v-for="node,index in form.nodes">

         <el-checkbox class="block" :indeterminate="node.isIndeterminate" v-model="node.checkAll" :label="node.id" :key="node.id" @change="(value) => handleCheckAllChange(value, index)">@{{node.name}}</el-checkbox>

                    <div style="margin: 15px 0;"></div>

                    <el-checkbox-group v-model="node.checkedshop" @change="(value) => handleCheckedCitiesChange(value, index)">

                    <el-checkbox v-for="shop,cindex in node.shops" :label="shop.id" :key="shop.id">@{{shop.name}}</el-checkbox>

          </el-checkbox-group>

</el-form-item>

---

ajax部分：

self.form.nodes = []

let j = 0

 for(let value of res.content.nodes){  //获取checkbox

 self.form.nodes.push({"isIndeterminate":false,"checkAll":false,"checkedshop":     [],"shops":value.son,"id":value.id,"name":value.name})

            for(let val of value.son){

                             if(val.status == 1){     //获取checkbox里相应被选中的选项

                                        self.form.nodes[j].checkedshop.push(val.id)

                                    }

                                }

                                j++;

                            }

嗯 就是两个v-for  数据稍显复杂的时候能用到  （之前写的很麻烦 ，也是自己的代码写的不够多没有第一时间想到，  代码review的时候优化了一下，真的省去很多时间了）

ps：全选函数以及其他用的element-ui checkbox里的一套  ，这里省略，详情点