今天遇到了el-table表格折叠时,点某行的折叠按钮时子行内容全展开问题,
想要的是点哪行哪行的子内容才展示,问题解决方案:
1、在ProTable 中加 :row-key="id" (ProTable是封装的el-table)
<ProTable
ref="proTable"
:columns="columns"
:data="tableData1"
:data-callback="dataCallback"
:tool-button="false"
:pagination="false"
:height="490"
:card="false"
:key="componentKey"
:row-key="id"
>
<template #operation="scope">
<el-button type="primary" link :icon="EditPen" @click="openTab(scope.row)">{{
!scope.row.flag ? t("excel.input") : t("excel.show")
}}</el-button>
<el-button type="primary" link :icon="Delete" @click="openDelete(scope.row)">{{ t("excel.delete") }}</el-button>
</template>
<el-table-column type="expand">
<template #default="scope">
<div>
<el-table :data="scope.row.family" >
<el-table-column label="Name" prop="name" />
<el-table-column label="State" prop="state" />
<el-table-column label="City" prop="city" />
<el-table-column label="Address" prop="address" />
<el-table-column label="Zip" prop="zip" />
</el-table>
</div>
</template>
</el-table-column>
</ProTable>
2、在 tableData1 中每个对象加id值
const tableData1 = [
{
id: 1,
family: [
{
name: 'Jerry1',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
}
],
},
{
id: 2,
family: [
{
name: 'Jerry2',
state: 'California',
city: 'San Francisco',
address: '3650 21st St, San Francisco',
zip: 'CA 94114',
}
]
}
]
问题解决