不知道大家有没有遇到这个需求,表格中嵌套着子表格,但是后端将主表格跟子表格都在一个接口返回来数据,如果是将后端的数据直接赋值给子表格就会出现一个问题,所有的子表格的数据都是一样的;那话不多说,下面开始展示我的代码:
这是html:
<a-table :loading="{ spinning: loading, tip: '努力加载中' }" :columns="columns" :data-source="data"
:defaultExpandAllRows="true" :expandIconColumnIndex="-1" :expandIconAsCell="false"
:pagination="pagination" :scroll="{ x: 1300, y: tableHeight }" class="components-table-demo-nested"
@change="changePage" rowKey="id" :rowSelection="{ onSelect: onSelect, onSelectAll: onSelectAll,
selectedRowKeys: selectedRowKeys,onChange: onSelectChange,}" :expandedRowKeys="expandedRowKeys" :components="components" bordered >
<span slot="action" slot-scope="text, record">
<a :style="{ marginRight: '8px' }" @click="handleExpand(record.id)">
{{ expandedRowKeys.includes(record.id) ? "折叠" : "展开" }}</a>
<a @click="recordFn(record.id)">流转记录</a>
</span>
<a-table style="width: 80%" id="eb_table" slot="expandedRowRender" slot-scope="record"
:columns="innerColumns" :data-source="record.coupletDisposeDetail" :pagination="false" rowKey="flowId">
<span slot="action" slot-scope="text, record" class="table-operation">
<a @click="checkFn(record)">查看</a>
</span>
</a-table>
</a-table>
这是封装请求
getPageDatas() {
this.loading = true;
const that = this;
this.$ajax.postReviewQuery(this.query).then((res) => {
if (res.code == 0) {
const arr = res.data.records;
that.data = arr;
that.pagination.total = res.data.total && parseInt(res.data.total);
that.data.forEach((e) => {
e.coupletMoney = changeAmount(e.coupletMoney);
e.coupletDisposeDetail.forEach(e=>{ e.borrowMoney=changeAmount(e.borrowMoney)
e.loanMoney=changeAmount(e.loanMoney)
})
});
}
this.loading = false;
});
},
如有其他更为简便的方法,欢迎指教,谢谢大家