【React】antd在table中使用dropdown组件

在使用antd库时,遇到在Table组件中集成Dropdown组件的问题。官方示例未能提供获取每行数据的方法。通过在columns属性中自定义Dropdown的渲染函数,成功解决了这个问题。详细解决方案参考了https://blog.csdn.net/superYe7/article/details/88836641。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

官方给出的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>
    ),

参考https://blog.csdn.net/superYe7/article/details/88836641

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值