基于 useAntdTable 的示例代码，展示了如何结合表单和表格，并实现新增、编辑和删除操作，同时在操作后重新请求列表接口并重新渲染页面。

当然可以。下面是一个基于 useAntdTable 的示例代码，展示了如何结合表单和表格，并实现新增、编辑和删除操作，同时在操作后重新请求列表接口并重新渲染页面。

示例代码

import React, { useState } from 'react';
import { Table, Button, Form, Input, Modal, message } from 'antd';
import { useAntdTable } from 'ahooks';
import axios from 'axios';

const getTableData = ({ current, pageSize }, formData) => {
  return axios.post('/api/tableData', {
    page: current,
    size: pageSize,
    ...formData,
  }).then(res => ({
    total: res.data.total,
    list: res.data.list,
  }));
};

const Demo = () => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState(null);

  const { tableProps, search } = useAntdTable(getTableData, { form });
  const { submit, reset } = search;

  const handleAdd = () => {
    setCurrentRecord(null);
    setVisible(true);
  };

  const handleEdit = (record) => {
    setCurrentRecord(record);
    setVisible(true);
  };

  const handleDelete = async (id) => {
    await axios.post('/api/delete', { id });
    message.success('Deleted successfully');
    submit();
  };

  const handleSubmit = async (values) => {
    if (currentRecord) {
      await axios.post('/api/edit', { ...values, id: currentRecord.id });
      message.success('Edited successfully');
    } else {
      await axios.post('/api/add', values);
      message.success('Added successfully');
    }
    setVisible(false);
    submit();
  };

  return (
    <div>
      <Form form={form} layout="inline" onFinish={submit}>
        <Form.Item name="name">
          <Input placeholder="Name" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">Search</Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={reset}>Reset</Button>
        </Form.Item>
      </Form>
      <Button type="primary" onClick={handleAdd} style={{ marginBottom: 16 }}>
        Add
      </Button>
      <Table
        {...tableProps}
        rowKey="id"
        columns={[
          { title: 'Name', dataIndex: 'name' },
          {
            title: 'Actions',
            render: (_, record) => (
              <>
                <Button type="link" onClick={() => handleEdit(record)}>Edit</Button>
                <Button type="link" onClick={() => handleDelete(record.id)}>Delete</Button>
              </>
            ),
          },
        ]}
      />
      <Modal
        visible={visible}
        title={currentRecord ? 'Edit' : 'Add'}
        onCancel={() => setVisible(false)}
        footer={null}
      >
        <Form
          initialValues={currentRecord}
          onFinish={handleSubmit}
          layout="vertical"
        >
          <Form.Item name="name" label="Name" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              {currentRecord ? 'Edit' : 'Add'}
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Demo;

解释

1. 数据获取：getTableData 函数负责从服务器获取表格数据，useAntdTable 使用此函数来管理表格数据和分页逻辑。
2. 表单：通过 Form 组件创建一个搜索表单，用户可以输入查询条件并提交表单来刷新表格数据。
3. 表格：使用 Table 组件展示数据，并添加“编辑”和“删除”操作按钮。
4. 新增和编辑：通过 Modal 弹出框来处理新增和编辑操作，根据 currentRecord 判断当前是新增还是编辑操作。
5. 删除：点击删除按钮调用 handleDelete 函数，发送删除请求后刷新表格数据。

这个示例展示了如何使用 useAntdTable 与 Ant Design 组件结合，实现一个功能齐全的表格应用。你可以根据自己的需求进行调整和扩展。