antdesignpro 操作栏查看按钮弹出对话框

如果你希望点击操作栏中的查看按钮后弹出一个对话框来显示更多的信息，可以使用 Ant Design 中的 Modal 组件。以下是一个示例代码：

import { Table, Modal } from 'antd';
import React, { useState } from 'react';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
      <span>
        <a onClick={() => showModal(record)}>View</a>
      </span>
    ),
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

function ExampleTable() {
  const [modalVisible, setModalVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState({});

  const showModal = record => {
    setCurrentRecord(record);
    setModalVisible(true);
  };

  const handleOk = () => {
    setModalVisible(false);
  };

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

  return (
    <div>
      <Table columns={columns} dataSource={data} />
      <Modal
        title="View Details"
        visible={modalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>Name: {currentRecord.name}</p>
        <p>Age: {currentRecord.age}</p>
        <p>Address: {currentRecord.address}</p>
      </Modal>
    </div>
  );
}

export default ExampleTable;

在上面的代码中，我们使用了 useState 钩子来维护弹出框的可见性和当前记录的状态。当用户点击 View 按钮时，我们将当前记录设置为用户点击的那一行，然后将 modalVisible 设置为 true，从而显示弹出框。在弹出框中，我们使用了 currentRecord 中的数据来显示更多的信息。当用户点击确定或取消时，我们都将 modalVisible 设置为 false，从而关闭弹出框。