react+es6+antd5.13.2+ts,antd表格的操作如何在父组件写?
我的子组件columns.tsx,只加表头,操作放在父组件。
columns.tsx的代码:
export const dataColumns = [
{
title: '项目成员',
dataIndex: 'name',
key: 'name',
},
{
title: '可选账号',
align: 'center',
dataIndex: 'peopleUM',
key: 'peopleUM',
},
{
title: '状态',
dataIndex: 'type',
key: 'type',
},
{
title: '工作',
align: 'center',
dataIndex: 'job',
key: 'job',
},
{
title: '范围',
align: 'center',
dataIndex: 'rankRange',
key: 'rankRange',
},
{
title: '供应商',
dataIndex: 'supplier',
key: 'supplier',
},
{
title: '设备类型',
dataIndex: 'deviceType',
key: 'deviceType',
},
{
title: '设备详情',
dataIndex: 'deviceDetails',
key: 'deviceDetails',
},
{
title: '软件',
dataIndex: 'paidSoftware',
key: 'paidSoftware',
},
{
title: '软件金额',
dataIndex: 'paidSoftwareAmount',
key: 'paidSoftwareAmount',
},
{
title: '位置',
dataIndex: 'region',
key: 'region',
},
{
title: '场地',
dataIndex: 'workPlace',
key: 'workPlace',
},
{
title: '进来日期',
dataIndex: 'typeState',
key: 'typeState',
},
{
title: '离开日期',
dataIndex: 'entryDate',
key: 'entryDate',
},
{
title: '设备证明',
dataIndex: 'clearanceCertificate',
key: 'clearanceCertificate',
},
{
title: '操作',
align: 'center',
dataIndex: 'action',
fixed: 'right',
width: '200px',
key: 'action',
// render: (_: any, record: any) => (
//
//
//
//
//
// ),
},
];
我父组件:要在操作这里增加按钮,代码如下:
import { dataColumns } from './columns';
const [columnsData, setColumnsData]: any = useState([]);
// table表头数据
const getColumnsFn = (list: any) => list.map((item: any) => {
if (item?.dataIndex === 'finalReviewResult') {
// setRenderFinalReviewResult(item);
} else if (item?.dataIndex === 'orderStatus') {
// setRenderOrderStatus(item);
} else if (item?.dataIndex === 'action') {
item.render = (text: string, record: any) => (
<>
<Space>
<span className='link-btn'>查看简历</span>
<span className='link-btn' onClick={() => handleEdit(record)}>编辑</span>
<span className='link-btn'>释放</span>
</Space>
</>
);
}
return item;
});
// ==========组件生命周期开始==========
useEffect(() => {
const currentColumns = getColumnsFn(dataColumns);
setColumnsData([...currentColumns]);
}, []);
<Table
loading={lodingFlag}
// rowSelection={{ ...rowSelection }}
dataSource={dataSource}
columns={columnsData}
size={'middle'}
bordered
className="project-member-table-content"
pagination={{ ...tablePagination }}
scroll={
dataSource.length > 0
? { x: 'max-content', y: 'calc(100vh - 230px)' }
: { x: 'max-content' }
}
/>