世界上最伟大的投资就是投资自己的教育
【图文并茂】ant design pro 技巧之如何用 EditableProTable 在抽屉式详情页里展示表格
随风发布于681 次阅读
上一篇 * 【图文并茂】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;
完结
本站文章均为原创内容,如需转载请注明出处,谢谢。
0 条回复
暂无回复~~
© 汕尾市求知科技有限公司 | Rails365 Gitlab | 知乎 | b 站 | csdn
粤公网安备 44152102000088号 | 粤ICP备19038915号
Top