本文共 903 字，大约阅读时间需要 3 分钟。

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

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

注意：

1）拷贝所在行数据时，需要注意两个字段，id和index。

id由后台生成，index即数组据在dataSource中的索引。完全拷贝会出现的情况是保存时id不唯一；且对复制数据和被复制数据中的某一条进行“编辑”或“删除”操作时，由于索引index一样，多条数据会同时被操作。

2）将dataSource拷贝到新数组copyRows中，给copyRows.id赋空值，给copyRows.index在dataSource数组长度上加1。

此过程可能会出现的问题是，拷贝后的id和index的处理，可能dataSource中的两个值也跟着改变了。原因是浅拷贝，新数组copyRows中字段改变会影响原来的dataSource数组中对应的值。所以要深拷贝，拷贝数组间值的变化不会影响到另外数组。

this.copy(index)}>复制
   // 行复制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 });};

转载地址：http://krvli.baihongyu.com/