外层循环和内层循环的关系_内层电子跃迁与外层电子跃迁

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

解决 eleui 外层表格 可以全选内层表格问题

之前做项目 发现外层表格全选时候 想全选内层表格 ，有用过toggleRowSelection，但是发现内层表格未打开时，无法触发内层表格的ref，所以我找了别的解决方法。

 <el-table-column width="20">
        <template slot-scope="scope">
                  <div v-if="scope.row.quantity==0" @click=childTableSelect(scope.row)>
                            <span class="childSpan"></span>
                   </div>
                   <div v-if="scope.row.quantity==1" @click=childTableCheck(scope.row)>
                             <span class="childSpanCheck"> <i
                                     class="el-icon-check  childSpanChecki"></i>
                              </span>
                  </div>
        </template>
 </el-table-column>

Jetbrains全家桶1年46，售后保障稳定

因为ele支持自定义，所以我重写了内层表格的全选，用内层表格的数据控制显示隐藏，当外层表格点击时候，找到内层表格的数据，再让quantity变为1即可。

.childSpan {
    display: inline-block;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #fff;
    z-index: 1;
}

.childSpanCheck {
    display: inline-block;
    position: relative;
    border: 1px solid #01b0ef;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #01b0ef;
    z-index: 1;
}

css贴上。
这里有个点 就是外层表格的选择 也需要内层表格数据控制了，不然内层表格全选取消的时候，控制不到外层的选择。代码贴上

 <el-table-column width="20">
         <template slot-scope="scope">
                <div v-if="addArr((scope.row.sellerRenewLicenseModels).map(function (index) { return  index.quantity;}))!=0">
                          <span class="childSpanCheck" @click="tableCheck(scope.row)"> <i
                                     class="el-icon-check  childSpanChecki"></i> </span>
                </div>
                 <div v-else>
                           <span class="childSpan" @click="tableSelect(scope.row)"></span>
                  </div>
         </template>
 </el-table-column>

取内层表格数据quantity 的和，判断是否为0，来控制选择。