react+antd表格操作列加dropdown和menu写法

在React中，使用Ant Design的Table组件，在表格中添加操作列并结合Dropdown和Menu组件可以实现更丰富的交互效果。

首先，我们需要导入相关的组件和样式：

import { Table, Dropdown, Menu, Button } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';

然后，在表格的columns中定义操作列，并使用Dropdown和Menu组件来定制操作菜单：

const columns = [
  ...其他列定义,
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <Dropdown overlay={menu}>
        <Button>
          操作 <DownOutlined />
        </Button>
      </Dropdown>
    ),
  },
];

const menu = (
  <Menu>
    <Menu.Item key="1">
      <a target="_blank" rel="noopener noreferrer" href="#">
        编辑
      </a>
    </Menu.Item>
    <Menu.Item key="2">
      <a target="_blank" rel="noopener noreferrer" href="#">
        删除
      </a>
    </Menu.Item>
  </Menu>
);

以上代码中，columns定义了表格的列，其中操作列使用render属性来渲染。在render方法中，我们使用Dropdown组件来包裹Button，并将Menu作为overlay传入。

menu定义了操作菜单的内容，其中使用Menu.Item来定义菜单项，通过设置key属性来区分不同的菜单项。菜单项可以是一段文本或者其他React元素，这里我们使用a标签来模拟菜单项的操作。

最后，在Table组件中将columns配置为表格的列：

<Table columns={columns} dataSource={data} />

以上是在React中使用Ant Design的Table组件添加操作列并结合Dropdown和Menu的写法，通过这种方式，我们可以方便地在表格中定制各种操作的菜单。