problem description
our company uses Ali"s ant-design open source framework, and now there is a need to nest tables in the table. After the user clicks on a row of data in the parent table, get the key, of that row and then asynchronously request the backend data to fill in the contents of the child table.
related codes
/ / the extraneous code
import {sidetransferDetail} from"@ services/payCenter";
export default class serial extends PureComponent {
state= {
secData:"",//}
/ / details table
expandedRowRender = (record, index, indent, expanded) = > {
let credentialsNum=record.credentialsNum //key
let sendData={
num:credentialsNum
}
sidetransferDetail(sendData) //ajax
.then((res)=>{
this.setState({
secData:res.data,
})
})
return (
<Table
columns={secColumns}
dataSource={this.state.secData}
pagination={false}
/>
);};
render () {
return(
<Card>
{this.renderForm()}
<div>
<Table
expandedRowRender={this.expandedRowRender}
loading={loading}
rowSelection={rowSelection}
dataSource={list}
columns={columns}
pagination={paginationProps}
scroll={{ x: 2500}}
size = "middle"
expandRowByClick={true}
onSelect={this.seFn}
/>
</div>
</Card>
)
}}
actual content
