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={()=>this.copy(index)}>复制</a>
<Divider type="vertical" />// 行复制
copy = index => {const { dataSource,  pagination } = this.state;const copyRows = JSON.parse(JSON.stringify(dataSource[index]));  // 深拷贝copyRows.id = '';  // 后台生成唯一标识copyRows.index= this.getFinalIndex(dataSource.length) + 1;  // 数组索引 dataSource.push(copyRows);message.success("复制成功");pagination.total -=1;pagination .current =parseInt((pagination.total - 1) / pagination.pageSize ) + 1;this.setState({ dataSource, pagination });
};

react 复制antd表格行相关推荐

antd table分页,关于react的antd表格分页的问题
最近用react的框架做了一个表格比较多的数据库,里面涉及到了以一些分页的问题,目前我还是一个前端的小白.通过自己看文档何请教一位大神才解决了这个问题,现在在这里记录一下自己的心得.自己写的应该是比较 ...
antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
1.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决.css 按照官网说的 ...
antd Table 实现表格行固定
需求: antd Table 只有列固定和表头固定,但是我的需求是行固定前三行固定. 实现步骤方式一.表格固定行(rowClassName 实现) 思路是 :用position: sti ...
phpexcel_cell 获取表格样式_Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行...
精品推荐国内稀缺优秀Java全栈课程-Vue+SpringBoot通讯录系统全新发布! Docker快速手上视频教程(无废话版)[免费] 作者:E-iceblue https://www.cnblo ...
antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
一.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
java操作跨页的word cell_Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行...
本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括如何在Word中创建嵌套表格. 对已有表格添加行或者列复制已有表格中的指定行或者列对跨页的表格可设置是否禁止跨页断行创建表 ...
java操作跨页的word cell_Java 创建Word表格/嵌套表格、添加/复制表格行或列、设置表格跨页断行...
概述表格作为一种可视化交流模式及组织整理数据的手段,在各种场合及文档中应用广泛.常见的表格可包含文字.图片等元素,我们操作表格时可以插入图片.写入文字及格式化表格样式等.下面,将通过Java编程在W ...
Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行
本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括如何在Word中创建嵌套表格. 对已有表格添加行或者列复制已有表格中的指定行或者列对跨页的表格可设置是否禁止跨页断行创建表 ...
Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行...
点击上方 "程序员小乐"关注公众号, 星标或置顶一起成长每天凌晨00点00分, 第一时间与你相约每日英文 Destiny decides who enters your lif ...
通过JS实现点击复制页面表格到Excel
本文基于react项目实现. 起因接了一个需求,要求实现点击页面上的一个按钮,复制某个表格数据,然后ctrl+V到Excel表格中. 思考其实我觉着这个功能用导出Excel的方式实现不就好了么.不 ...

react 复制antd表格行

react 复制antd表格行相关推荐

最新文章

热门文章