Ant Design ProTable 合并用例执行数据单元格

使用 Ant Design ProTable 合并用例执行数据单元格

如果您想将'用例执行数据'表头下的数据合并为一个单元格，可以使用 ProTable 的 render 方法来自定义单元格的渲染。以下是修改后的代码示例：

import { ProFormInstance } from '@ant-design/pro-form';
import React, { ForwardedRef, forwardRef, useEffect, useRef, useState } from 'react';
import ContentCard from '@/components/ContentCard';
import { ActionType, EditableProTable, ProColumns } from '@ant-design/pro-table';
export type CaseFormRef = {
  getApplicationFormValue?: () => any;
  validateApplicationForm: () => Promise<boolean> | undefined;
};
interface Props {
  ref?: ForwardedRef<CaseFormRef>;
}
const datas = [
  {
    id: '1',
    totals: '84',
    pass: '80',
    fail: '1',
    block: '3',
    nt: '0',
  },
];
const UseCases: React.FC<Props> = forwardRef(() => {
  const actionRef = useRef<ActionType>();
  const [data, setData] = useState<any>([]);

  const columns:ProColumns[] = [
    {
      title: '用例执行数据',
      align: 'center',
      render: (_, record) => (
        <>
          <span>{record.totals}</span>
          <span>{record.pass}</span>
          <span>{record.fail}</span>
          <span>{record.block}</span>
          <span>{record.nt}</span>
        </>
      ),
    },
  ];

  useEffect(() => {
    setData(datas);
  }, []);
  return (
    <ContentCard title={'用例执行结果'}>
      <EditableProTable
        rowKey="id"
        recordCreatorProps={false}
        actionRef={actionRef}
        columns={columns}
        value={data}
        bordered
      />
    </ContentCard>
  );
});
export default UseCases;

在这个示例中，我们使用了render方法来自定义'用例执行数据'列的单元格渲染。我们将totals、pass、fail、block和nt字段的值分别渲染到不同的span元素中，这些span元素将在同一个单元格中显示。这样，您就可以将这些数据合并为一个单元格显示出来。