大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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>
因为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，来控制选择。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/223453.html原文链接：https://javaforall.net
