react+antd的table 序号和操作列多个按钮写法

使用table比较常见的是需要有勾选框以及序号列

1、如果需要表单查询可以选择它的扩展插件pro table

2、操作列多个按钮,如图所示:

 代码参考:

{
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    ellipsis: true,
    align:'center',
    render: () => (
        <Space size="middle">
            <Button className='count' onClick={this.handleCount} type='primary' key='1'>计算</Button>
            <Button className='publish' onClick={this.handlePublish} type='primary' danger key='2'>发布</Button>
            <Button className='edit' onClick={this.handleEdit} type='primary' key='3'>编辑</Button>
         </Space>
    ),
},

 

React中,使用Ant Design的Table组件,在表格中添加操作并结合Dropdown和Menu组件可以实现更丰富的交互效果。 首先,我们需要导入相关的组件和样式: ```jsx import { Table, Dropdown, Menu, Button } from 'antd'; import { DownOutlined } from '@ant-design/icons'; import 'antd/dist/antd.css'; ``` 然后,在表格的columns中定义操作,并使用Dropdown和Menu组件来定制操作菜单: ```jsx 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配置为表格的: ```jsx <Table columns={columns} dataSource={data} /> ``` 以上是在React中使用Ant Design的Table组件添加操作并结合Dropdown和Menu的写法,通过这种方式,我们可以方便地在表格中定制各种操作的菜单。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值