效果如下:
expandTab = (expanded, record) => {
const { dispatch } = this.props;
// 用于解决展开一项其他项目自动关闭
let temps = []
if (expanded) {
temps.push(record.businessappno)
}
this.setState({
companySource: [],
loading: true,
expandedRowKeys: temps,
businessappno: record.businessappno
})
dispatch(
xxx.xxx('xx.xxxx.xxxxxxxxxx', 'v2.0', {
businessappno: record.businessappno,
pageNumber: '1',
pageSize: '99999'
}, data => {
if (data.flag === '1') {
if (data.items) {
this.setState({
companySource: data.items,
loading: false
});
} else {
this.setState({
companySource: [],
loading: false
});
}
} else {
message.error(data.msg);
this.setState({
companySource: [],
loading: false
});
}
})
);
}
renderTab = () => {
const { companySource, loading } = this.state;
return (
<div style={{ height: 300, overflow: "hidden", overflowY: "scroll" }}>
<Table columns={this.tabColumns}
dataSource={companySource}
loading={loading}
rowKey={(record, index) => record.detailid}
pagination={false}
/>
</div>
)
}
render() {
const rowSelection = {
onChange: (selectedRowKeys) => {
this.setState({
selectedIDs: selectedRowKeys ? selectedRowKeys.join(',') : '',
});
},
selectedRowKeys: selectedIDs.split(','),
// getCheckboxProps: (record) => ({
// disabled: record.applystatus === '03',
// })
};
return (
<PageHeaderWrapper>
<Card size="small" title="申请查询">
<div className={styles.tableList}>
<div className={styles.tableListForm}>{this.renderForm()}</div>
<Table
className={dataSource.length ? "" : "table-no-data"}
onExpand={this.expandTab}
expandedRowRender={() => this.renderTab()}
expandedRowKeys={expandedRowKeys}
rowSelection={rowSelection}
dataSource={dataSource}
columns={this.columns}
scroll={{ x: true }}
rowKey={(record, index) => record.businessappno}
pagination={documentPagenation}
onChange={this.onTableChange}
/>
</div>
</Card>
</PageHeaderWrapper>
}