【Vue】勾选element外层表格某行数据时，该行数据下嵌套的内层表格数据自动全选

Z时代
2024-01-10
分类：技术分享

急急急！！！求教诸位大神，如何勾选element外层表格某行数据时，该行数据下嵌套的内层表格数据自动全部选中。
【Vue】勾选element外层表格某行数据时，该行数据下嵌套的内层表格数据自动全选

        <el-table
:data="tableData"
border
element-loading-text="Loading"
default-expand-all
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="Name"
label="物资名称">
</el-table-column>
<el-table-column
prop="num"
label="批次">
</el-table-column>
<el-table-column
prop="user"
label="责任人">
</el-table-column>
<el-table-column type="expand">
<template slot-scope="props">
<div class="table_inner">
<el-table
:data="props.row.detail"
ref="multipleTableSecond"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="cuu成分" prop="cuu">
</el-table-column>
<el-table-column
prop="week"
label="周期">
</el-table-column>
<el-table-column
label="是否补充"
prop="isadd">
</el-table-column>
</el-table>
</div>
</template>
</el-table-column>
</el-table>
data中：
return {
tableData: [
{
Name:'量粒',
num:'第一批',
user:'杜强',
detail:[
{
cuu:'CUUT-1',
week:1,
isadd:'是',
},
{
cuu:'CUUT-2',
week:2,
isadd:'否',
}
]
},
],
multipleTableSecond: [],
multipleTable: [],}