当前位置: 首页 > article >正文

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

http://www.kler.cn/news/232742.html

相关文章:

  • LabVIEW双光子荧光显微成像系统开发
  • MPLS VPN功能组件(3)
  • itextpdf使用:使用PdfReader添加图片水印
  • 【Unity】重力场中的路径预测方法
  • 排序算法---插入排序
  • 在django中集成markdown文本框
  • Unity类银河恶魔城学习记录5-1.5-2 P62-63 Creating Player Manager and Skill Manager源代码
  • golang 通过 cgo 调用 C++ 库
  • 2024.1.30力扣每日一题——使循环数组所有元素相等的最少秒数
  • 【MySQL进阶之路】SpringBoot 底层如何去和 MySQL 交互了呢?
  • 浏览器提示ERR_SSL_KEY_USAGE_INCOMPATIBLE解决
  • Node.js JSON Schema Ajv依赖库逐步介绍验证类型和中文错误提示
  • elementui上传文件不允许重名
  • Java中 使用Lambda表达式实现模式匹配和类型检查
  • 云服务器也能挂游戏 安卓模拟器
  • 树莓派-Ubuntu22.04
  • 【Unity游戏设计】跳一跳Day1
  • 深度学习预备知识1——数据操作
  • 设置了.gitignore文件,但某些需要被忽略的文件仍然显示
  • Git介绍和常用命令说明
  • 微软.NET6开发的C#特性——委托和事件
  • SpringMVC-组件解析
  • vscode 括号 python函数括号补全
  • 【Flink】FlinkSQL的DataGen连接器(测试利器)
  • arkTS开发鸿蒙OS应用(登录页面实现,连接数据库)
  • 158基于matlab的用于分析弧齿锥齿轮啮合轨迹的程序
  • flink反压及解决思路和实操
  • (十八)springboot实战——spring securtity注解方式的授权流程源码解析
  • 如何连接ChatGPT?无需科学上网,使用官方GPT教程
  • AT_abl_d 题解