第一个 ProTable
根据官方文档,建立个 index.tsx
,配置好路由,就可以用了
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { useRef } from 'react';
import * as SPXH from '@/services/erp/sp-xh';
import ButtonDelete from './ButtonDelete';
import ModalFormEdit from './ModalFormEdit';
import ButtonEdit from './ButtonEdit';
import ModalFormCreate from './ModalFormCreate';
import type { Ref } from './ModalFormEdit';
export default () => {
const tableAction = useRef<ActionType>();
const modalFormEdit = useRef<Ref>();
const columns: ProColumns<TYPE.Info>[] = [
{
title: '编号',
dataIndex: 'id',
width: 100,
hideInSearch: true,
},
{
title: '名称',
dataIndex: 'title',
copyable: true,
ellipsis: true,
},
{
title: '操作',
valueType: 'option',
width: 100,
align: 'center',
render: (_text, record, _, action) => [
<ButtonEdit
key={'edit'}
afterClick={() => {
modalFormEdit?.current?.showModal({ id: record.id });
}}
></ButtonEdit>,
<ButtonDelete
id={record.id}
key={'delete'}
afterDelete={() => {
action?.reload();
}}
></ButtonDelete>,
],
},
];
return [
<ProTable<TYPE.Info>
actionRef={tableAction}
key={'table'}
// 边框
bordered={true}
// 列配置
columns={columns}
// 分页配置
pagination={{
pageSize: 10,
}}
// 请求数据
request={(values) => {
return SPXH.getPageData({
...values,
});
}}
rowKey="id"
dateFormatter="string"
headerTitle="列表"
// 工具条
toolBarRender={() => [
<ModalFormCreate
key="button"
afterCreate={() => {
tableAction.current?.reload();
}}
/>,
]}
options={{
density: false,
fullScreen: false,
reload: false,
setting: false,
}}
/>,
<ModalFormEdit
ref={modalFormEdit}
key={Math.random()}
afterSubmit={() => {
tableAction.current?.reload();
}}
></ModalFormEdit>,
];
};