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

最新推荐文章于 2024-09-01 08:42:32 发布

漂亮得皮皮

最新推荐文章于 2024-09-01 08:42:32 发布

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

文章标签： reactjs es6 ant

本文链接：https://blog.youkuaiyun.com/weixin_36706903/article/details/108535930

本文介绍了如何在React应用中使用Ant Design库创建带有Dropdown和Menu的表格操作列。通过在列渲染时传递行数据给Dropdown的overlay属性，并在Menu点击事件中获取行数据，实现弹框展示功能。

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

需求：表格的每行操作里，有一个Dropdown组件，里面是menu组件，这里在列进行渲染的时候，把行数据传给menu,menu被点击的时候获取到行数据进行弹框展示

代码分析：

1、表格的列渲染操作列的时候，Dropdown的api里有overlay属性，这个里是menu标签，我这里用的bind方法绑定，并且把行数据传给下拉框，然后menu组件就可以获取到行数据

{
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    ellipsis: true,
    align:'center',
    render: (text,record) => {
        return (
            <Space size="middle">
           //menu单独定义的，也就是第二步
               <Dropdown overlay={menu.bind(this,record)} record={record} >
                    <a>
                        操作
                    </a>
                </Dropdown>
            </Space>
        )
    },
}

2、menu，这里获取到record行数据，再传给点击事件

const menu =(record)=>{
    return (
        <Menu onClick={this.handleChildActions.bind(this,record)} record={record}>
            <Menu.Item key='adjustment'>
                <span>调仓</span>
            </Menu.Item>
            <Menu.Item key='redemption'>
                <span>赎回</span>
            </Menu.Item>
        </Menu>
    )
}

3、menu点击事件，事件本来就有一些值，比如key,item，可以查看api

handleChildActions = (row,key)=>{
    console.log('子基金操作:',row,key)
    if (key==='adjustment'){
        console.log('子基金调仓：')
    }
    else {
        console.log('子基金赎回：')
    }
}