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

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

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

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' }
              }
            />
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值