【图文并茂】ant design pro 技巧之如何用 EditableProTable 在抽屉式详情页里展示表格

上一篇 * 【图文并茂】ant design pro 如何用 Drawer 和 ProDescriptions 实现一个抽屉式详情页

如上图所示，如何在详情页增加一个表格呢

有时候我们要显示一些操作记录，或更多详情信息，或者别的关联表格的信息

我们就需要表格

我用到 EditableProTable 这个组件

EditableProTable 里面的数据肯定是数组啦

 <EditableProTable<DataSourceType>
            rowKey="_id"
            headerTitle={<FormattedMessage id="salesRecord" defaultMessage="Sales Record" />}
            maxLength={5}
            scroll={{
              x: 960,
            }}
            // @ts-ignore
            recordCreatorProps={
              position !== 'hidden'
                ? {
                    position: position as 'top',
                    record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
                  }
                : false
            }
            loading={false}
            columns={columns}
            request={async () => ({
              data: currentRow.salesRecords,
              success: true,
            })}
            value={dataSource}
            onChange={setDataSource}
            editable={{
              type: 'multiple',
              editableKeys,
              onSave: async (rowKey, data, row) => {
                console.log(rowKey, data, row);
              },
              onChange: setEditableRowKeys,
            }}
          />
        </>

定义里面的表头信息：

 const columns: ProColumns<DataSourceType>[] = [
    {
      title: <FormattedMessage id="orderNumber" defaultMessage="Order Number" />,
      dataIndex: 'order',
      render: (_, record: any) =>
        record.order && (
          <>
            {record.order.orderNumber} <CopyToClipboard text={record.order.orderNumber} />
          </>
        ),
    },
    {
      title: <FormattedMessage id="customer" defaultMessage="customer" />,
      dataIndex: 'customer',
      render: (_, record: any) =>
        record.customer && (
          <>
            {record.customer.email} <CopyToClipboard text={record.customer.email} />
          </>
        ),
    },
    {
      title: <FormattedMessage id="orderAmount_title" defaultMessage="Amount" />,
      dataIndex: 'amount',
    },
    {
      title: <FormattedMessage id="creation_time" defaultMessage="Created At" />,
      dataIndex: 'createdAt',
      valueType: 'dateTime',
    },
  ];

完整代码：

import CopyToClipboard from '@/components/CopyToClipboard';
import {
  EditableProTable,
  ProColumns,
  ProDescriptions,
  ProDescriptionsItemProps,
} from '@ant-design/pro-components';
import { FormattedMessage } from '@umijs/max';
import { Drawer } from 'antd';
import React, { useState } from 'react';

interface Props {
  onClose: (e: React.MouseEvent | React.KeyboardEvent) => void;
  open: boolean;
  currentRow: API.ItemData;
  columns: ProDescriptionsItemProps<API.ItemData>[];
}

type DataSourceType = {
  _id: string;
  storeName: string;
  orderNumber: string;
  amount: number;
  buyerId: string;
  createdAt?: Date;
  updatedAt?: Date;
};

const Show: React.FC<Props> = (props) => {
  const { onClose, open, currentRow, columns: cols } = props;

  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
  const [position] = useState<'top' | 'bottom' | 'hidden'>('hidden');

  const columns: ProColumns<DataSourceType>[] = [
    {
      title: <FormattedMessage id="orderNumber" defaultMessage="Order Number" />,
      dataIndex: 'order',
      render: (_, record: any) =>
        record.order && (
          <>
            {record.order.orderNumber} <CopyToClipboard text={record.order.orderNumber} />
          </>
        ),
    },
    {
      title: <FormattedMessage id="customer" defaultMessage="customer" />,
      dataIndex: 'customer',
      render: (_, record: any) =>
        record.customer && (
          <>
            {record.customer.email} <CopyToClipboard text={record.customer.email} />
          </>
        ),
    },
    {
      title: <FormattedMessage id="orderAmount_title" defaultMessage="Amount" />,
      dataIndex: 'amount',
    },
    {
      title: <FormattedMessage id="creation_time" defaultMessage="Created At" />,
      dataIndex: 'createdAt',
      valueType: 'dateTime',
    },
  ];
  return (
    <Drawer width="70%" open={open} onClose={onClose} closable={false}>
      {currentRow?.cardSecret && (
        <>
          <ProDescriptions<API.ItemData>
            column={2}
            title={currentRow?.cardSecret}
            request={async () => ({
              data: currentRow || {},
            })}
            params={{
              id: currentRow?._id,
            }}
            columns={cols as ProDescriptionsItemProps<API.ItemData>[]}
          />
          <EditableProTable<DataSourceType>
            rowKey="_id"
            headerTitle={<FormattedMessage id="salesRecord" defaultMessage="Sales Record" />}
            maxLength={5}
            scroll={{
              x: 960,
            }}
            // @ts-ignore
            recordCreatorProps={
              position !== 'hidden'
                ? {
                    position: position as 'top',
                    record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
                  }
                : false
            }
            loading={false}
            columns={columns}
            request={async () => ({
              data: currentRow.salesRecords,
              success: true,
            })}
            value={dataSource}
            onChange={setDataSource}
            editable={{
              type: 'multiple',
              editableKeys,
              onSave: async (rowKey, data, row) => {
                console.log(rowKey, data, row);
              },
              onChange: setEditableRowKeys,
            }}
          />
        </>
      )}
    </Drawer>
  );
};

export default Show;

完结

• 获取 ant design pro & nodejs & typescript 多角色权限动态菜单管理系统源码*
• 我正在做的程序员赚钱副业 - Shopify 真实案例技术赚钱营销课视频教程