1、给表格加上方法 @expand-change="onExpandsRow"
<el-table
:data="tableData"
stripe
border
highlight-current-row
v-loading="listLoading"
ref="table"
@expand-change="onExpandsRow"
>
<el-table-column type="expand">
<template slot-scope="{ row }">
<div class="expand-table" v-if="row.dtl">
<table width="100%" border="0" cellspacing="1" :data="row.dtl">
<tr>
<th width="4%" align="center">序号</th>
<th width="14.5%" align="center">内容编码</th>
<th>内容</th>
</tr>
<tr v-for="(item, index) in row.dtl" :key="index">
<td align="center">{{ index + 1 }}</td>
<td align="center">{{ item.checklistId }}</td>
<td>{{ item.content }}</td>
</tr>
</table>
</div>
<div v-else style="text-align: center">
暂无内容
</div>
</template>
</el-table-column>
<el-table-column
type="index"
label=""
min-width="50"
align="center"
></el-table-column>
</el-table>
2、从后台返回的表格数据结构里面含有dtl为null,所以是传入id请求数据
//展示行
onExpandsRow(row, index, e) {
if (row.dtl) {
!index && this.$refs.table.toggleRowExpansion(row);
} else {
this.listLoading = true;
let param = { id: row.siteClassId };
this.$api.请求方法(param)
.then(res => {
this.listLoading = false;
if (res.data.code == 0) {
row.dtl = res.data.data;
}
!index && this.$refs.table.toggleRowExpansion(row);
})
.catch(error => {
this.listLoading = false;
});
}
}