ant design 实现表单删除功能

要实现表单删除功能，可以使用antd的Table组件和Modal组件。

首先，需要在Table组件中添加一个列来显示删除按钮，例如：

<Table dataSource={dataSource} columns={columns}>
  <Column
    title="操作"
    dataIndex="operation"
    render={(text, record) =>
      dataSource.length >= 1 ? (
        <Popconfirm
          title="确定要删除吗？"
          onConfirm={() => handleDelete(record.key)}
        >
          <a>删除</a>
        </Popconfirm>
      ) : null
    }
  />
</Table>

在这个例子中，我们为表格添加了一个名为“操作”的列，用来显示删除按钮。在这个列中，我们使用了Popconfirm组件来确认是否删除，当用户点击确认按钮时，会调用handleDelete函数来删除这一行数据。

接下来，我们需要实现handleDelete函数，例如：

const handleDelete = key => {
  const newData = dataSource.filter(item => item.key !== key);
  setDataSource(newData);
};

在这个函数中，我们使用了filter方法来过滤掉要删除的那一行数据，并用setDataSource方法更新表格数据源。

最后，我们可以使用Modal组件来显示删除成功的提示，例如：

const [modalVisible, setModalVisible] = useState(false);

const handleDelete = key => {
  const newData = dataSource.filter(item => item.key !== key);
  setDataSource(newData);
  setModalVisible(true);
};

return (
  <>
    <Table dataSource={dataSource} columns={columns}>
      {/* 省略表格列的代码 */}
    </Table>
    <Modal
      title="删除成功"
      visible={modalVisible}
      onOk={() => setModalVisible(false)}
      onCancel={() => setModalVisible(false)}
    >
      <p>数据已成功删除！</p>
    </Modal>
  </>
);

在这个例子中，我们使用useState来管理Modal的可见性，并在handleDelete函数中设置modalVisible为true来显示Modal。当用户关闭Modal时，我们使用setModalVisible(false)来隐藏Modal。

这样，我们就实现了一个简单的表单删除功能。