【React】react AntD table嵌套问题

Z时代
2024-01-10
分类：技术分享

react AntD table嵌套问题

目标效果

相关代码

import React, { PureComponent, Fragment } from 'react';
import { Table,Button} from 'antd';

export default class CauseTable extends PureComponent {

state ={}
constructor(props) {
super(props);
}
componentDidMount() {
。。。
}
loop = (text) =>{
return (
<div key={text.id}>
<div>目标:{text.rectifyGoal}</div>
<div>责任人:{text.createUserName}</div>
<div>具体整改措施:{text.rectifyMeasure}</div>
<div>计划完成时间:{moment(text.planCompleteTime).format('YYYY-MM-DD')}        </div>
</div>)
}
expanded = (data) => {
console.log('进入')
const detail =data.map((i)=>(this.loop(i)))
return <div>{detail}</div>
}
render() {
const {loading, pagination,rowKey,isExport,paginationProps,
isColSetting,onAdd,onDelete,rowSelection,...otherProps } = this.props;
const {columns,dataSource} = this.state
return (
<div>
<Table
columns={columns}
rowKey={rowKey || 'key'}
dataSource={dataSource}
loading ={loading}
pagination={paginationProps}
expandedRowRender={record=>{
if (record&&record.children&&record.children.length>0) {
return this.expanded(record.children)
}
}} />
</div>
)}