【react】react+es6+antd5.13.2+ts,antd表格的操作如何在父组件写？

react+es6+antd5.13.2+ts,antd表格的操作如何在父组件写？

我的子组件columns.tsx，只加表头，操作放在父组件。

columns.tsx的代码：

c 复制代码

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) => (
    //   <div>
    //     <Button type='link' onClick={() => handleInterview(record)}>查看简历</Button>
    //     <Button type='link' disabled={isShowEquipmentRequisition} onClick={() => handleInterview(record)}>设备领用</Button>
    //     <Button type='link' onClick={() => handlePersonnelManagement}>释放</Button>
    //   </div>
    // ),
  },
];

我父组件：要在操作这里增加按钮，代码如下：

c 复制代码

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' }
              }
            />