重点在于属性expandedRowKeys,这个属性是控制展开项的数组,在展开获取数据请求时先进行清空这个属性,它是一个数组,然后push进入当前展开项,通过始终保持一个展开项不全部展开就能处理这个问题了
<a-table ref='saleTable' :expandedRowKeys="curExpands" rowKey="PurchaseId"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @expand="expand"
:columns="columns" expandRowByClick :data-source="purchaselistdata" :loading="loading"
:scroll="{ x: 1600, y: tableHeight }" bordered :pagination="pagination">
<a-tag slot="Channel" slot-scope="text" :color="text | paytypecolor">
{{text | Channel }}
</a-tag>
<a-tag slot="Status" slot-scope="text" :color="text | PurchaseStatuscolor">
{{text | PurchaseStatus }}
</a-tag>
<div slot="action" slot-scope="text,tags,i">
<a-button type="link" inline @click.stop="openDetailDialog(text,tags,i)">详情</a-button>
<!-- <a-button type="link" inline @click="openDetailDialog(text,tags,i)">明细</a-button> -->
<a-button type="link" inline @click.stop="openAfterSaleDialog(text,tags,i)">售后</a-button>
<a-button type="link" inline @click.stop="openPutStorageDialog(text,tags,i)">入库</a-button>
</div>
<a-table slot="expandedRowRender" :rowKey="(record,index)=>{return index}" slot-scope="text"
:columns="innerColumns" :data-source="innerData" :pagination="false">
<a-tag slot="Status" slot-scope="text" :color="text | purchaseItemStatuscolor">
{{text | purchaseItemStatus }}
</a-tag>
</a-table>
</a-table>
在expand事件中进行操作
expand(e, row) {
this.curExpands = [];
if (e) {
this.curExpands.push(row.PurchaseId)
this.$api.procureItemById(row.PurchaseId).then(res => {
this.innerData = res.data;
});
}
},