problem description
when the ant-design header data is obtained at the request backend, when the table content is requested, the number of content data items is normal, but the content is displayed as a space, and if it is not obtained by the request, the display is normal (the header has been displayed normally before the request table table content).
the environmental background of the problems and what methods you have tried
change the header to a fixed header to display normally, but not the desired result
related codes
/ / Please paste the code text below (do not replace the code with pictures)
import React from "react"
import {Table} from" antd";
import PubSub from "pubsub-js"
import axios from" axios"
export default class TableComment extends React.Component {
componentDidMount(){
// this.getReportHeader(1);//
const columns = [{
title: "",
dataIndex: "lastname",
key: "lastname",
width: 400,
fixed: "left"
}, {
title: "",
children: [{
title: "",
dataIndex: "locationname",
key: "locationname",
width: 500
}, {
title: "",
dataIndex: "birthday",
key: "birthday",
width: 500,
}],
}, {
width: 300,
title: "",
dataIndex: "sex",
key: "sex",
}, {
title: "",
dataIndex: "departmentname",
key: "departmentname",
}, {
title: "",
dataIndex: "workcode",
key: "workcode",
width: 400,
fixed: "right",
}];
this.setState({columns})
//this.getReportData(1);
PubSub.subscribe("searchData",(msg,resutlData) => {
this.getReportData(1); ////
});
}
getReportHeader=(reportid)=>{
const url = "/GetReportHeaderServlet";
axios.get(url,{
params:{id:reportid}
}).then(response => {
const columns = response.data;
this.setState({columns});
console.log(columns);
}).catch((error) => {
if(window.console){
console.log(error.message);
}
})
}
getReportData =(reportid)=>{
const url = "/GetReportDataServlet";
axios.get(url,{
params:{id:reportid}
}).then(response => {
const data = response.data;
this.setState({data});
}).catch((error) => {
console.log(error.message);
})
}
state = {
selectedRowKeys: [], // Check here to configure the default column
columns:[],
data:[]
};
onSelectChange = (selectedRowKeys) => {
console.log("selectedRowKeys changed: ", selectedRowKeys);
this.setState({ selectedRowKeys });
}
render() {
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
const {columns,data} = this.state;
return (
<div style={{margin:8}}>
<Table rowSelection={rowSelection} columns={columns} dataSource={data} bordered size="middle" scroll={{ x: "150%", y: 340 }}/>
</div>
);
}}