第一个 ProTable

5

5

根据官方文档，建立个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>,
  ];
};