外层循环和内层循环的关系_内层电子跃迁与外层电子跃迁
外层循环和内层循环的关系_内层电子跃迁与外层电子跃迁
全栈程序员站长
发布于 2022-11-17 01:21:27
发布于 2022-11-17 01:21:27
代码可运行
运行总次数：0
代码可运行
大家好，又见面了，我是你们的朋友全栈君。
解决 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>因为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，来控制选择。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/223453.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年10月29日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
