antdesignpro 操作栏查看按钮实现

在 Ant Design Pro 中，可以通过配置 Table 组件的 columns 属性来实现操作栏查看按钮。首先，在 columns 中添加一个对象，用于定义需要显示的数据列，例如：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <Space size="middle">
        <a onClick={() => handleView(record)}>查看</a>
      </Space>
    ),
  },
];

其中，第二列定义了操作栏，使用了 render 函数来渲染出查看按钮，并设置了点击事件处理函数 handleView。这个函数可以在组件中定义，例如：

const handleView = (record) => {
  Modal.info({
    title: '详细信息',
    content: (
      <div>
        <p>姓名：{record.name}</p>
        <p>年龄：{record.age}</p>
        <p>性别：{record.gender}</p>
      </div>
    ),
  });
};

这个函数使用了 Ant Design 中的 Modal 组件来显示详细信息，其中 record 参数就是当前点击的数据行。这样，就可以实现在表格中添加操作栏查看按钮的功能。