react 复制antd表格行

需求:表格操作列已有“编辑”、“删除”功能,现要求增加“复制”表格行功能

思路:复制所在行数据,再push到表格列数组dataSource中

注意:
1)拷贝所在行数据时,需要注意两个字段,id和index。
id由后台生成,index即数组据在dataSource中的索引。完全拷贝会出现的情况是保存时id不唯一;且对复制数据和被复制数据中的某一条进行“编辑”或“删除”操作时,由于索引index一样,多条数据会同时被操作。
2)将dataSource拷贝到新数组copyRows中,给copyRows.id赋空值,给copyRows.index在dataSource数组长度上加1。
此过程可能会出现的问题是,拷贝后的id和index的处理,可能dataSource中的两个值也跟着改变了。原因是浅拷贝,新数组copyRows中字段改变会影响原来的dataSource数组中对应的值。所以要深拷贝,拷贝数组间值的变化不会影响到另外数组。

<a onClick={
   ()=>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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的写法,通过这种方式,我们可以方便地在表格中定制各种操作的菜单。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值