【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' }
              }
            />
相关推荐
超人不会飛11 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦14 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想17 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
The_cute_cat18 分钟前
JavaScript的初步学习
开发语言·javascript·学习
海天胜景21 分钟前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
烛阴36 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
独立开阀者_FwtCoder1 小时前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder1 小时前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github
前端小盆友1 小时前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js
前端小巷子1 小时前
跨域问题解决方案:开发代理
前端·javascript·面试