官方给出的dropdwpn使用方法无法在table中得到每一行的信息
import { Menu, Dropdown, Icon } from 'antd';
const menu = (
<Menu>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
1st menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
2nd menu item
</a>
</Menu.Item>
<Menu.Item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
3rd menu item
</a>
</Menu.Item>
</Menu>
);
ReactDOM.render(
<Dropdown overlay={menu}>
<a className="ant-dropdown-link" href="#">
Hover me <Icon type="down" />
</a>
</Dropdown>,
mountNode,
);
所以改成在columns中改写Dropdown的箭头函数 这样就可以了
{
width:'5rem',
title: <IntlTranslation intlKey = "Columns.Action"/>,
dataIndex:'action',
key: 'action',
render: (text, record,index) => (
<Dropdown overlay={()=>{
return(
<Menu onClick={handleMenuClick}>
<Menu.Item key="1">Edit</Menu.Item>
<Menu.Item key="2">Previw</Menu.Item>
<Menu.Item style={{background:'#da1e28',color:'#ffffff'}} key="3">
<Popconfirm title="Are you sure to delete?" onConfirm={() => this.handleDelete(index)}>
Delete
</Popconfirm>
</Menu.Item>
</Menu>
)}}>
<Button>
<Icon type="down" />
</Button>
</Dropdown>
),
在使用antd库时,遇到在Table组件中集成Dropdown组件的问题。官方示例未能提供获取每行数据的方法。通过在columns属性中自定义Dropdown的渲染函数,成功解决了这个问题。详细解决方案参考了https://blog.csdn.net/superYe7/article/details/88836641。
4373

被折叠的 条评论
为什么被折叠?



