antd实现在protable组件中双击一条信息弹出Card组件以及信息

可以通过在antd的ProTable组件的row上添加onDoubleClick事件来实现双击弹出Card组件，具体实现代码如下：

import { ProTable } from '@ant-design/pro-table';
import { Card } from 'antd';
import React, { useState } from 'react';

const data = [
  {
    key: '1',
    name: '信息1',
    content: '信息1的详细内容',
  },
  {
    key: '2',
    name: '信息2',
    content: '信息2的详细内容',
  },
  {
    key: '3',
    name: '信息3',
    content: '信息3的详细内容',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
];

const DoubleClickTable = () => {
  const [visible, setVisible] = useState(false);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleDoubleClick = (record) => {
    setTitle(record.name);
    setContent(record.content);
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <>
      <ProTable
        dataSource={data}
        columns={columns}
        rowKey="key"
        onRow={(record) => ({
          onDoubleClick: () => handleDoubleClick(record),
        })}
      />
      <Modal visible={visible} onCancel={handleCancel}>
        <Card title={title}>
          <p>{content}</p>
        </Card>
      </Modal>
    </>
  );
};

export default DoubleClickTable;

在这里，我们实现了一个名为DoubleClickTable的组件，它包装了antd的ProTable组件，并添加了双击事件。当用户双击某个row时，会弹出一个Modal组件，其中包含了Card组件，显示了该row的name和content。用户可以在Modal中查看该row的详细内容。