java实现table可编辑_动态渲染可编辑单元格的Table

一、问题描述

问题是这样的，后台传了xArr = [x1, x2,...,xn]和yArr = [y1, y2, ..yn]两个数组，前端要渲染出表格并且可以填写每个单元格的值，然后按照一定数据结构保存并传给后台，并且再次获取这个数据结构和数组xArr、yArr可以自己渲染出这个表？实现新增和修改的功能。大致界面效果如下图所示：

y1, y2,...,yn作为列名，x1，x2, ..., xn作为第一列数据，此业务模型是一种常见的表格，只不过要求行列都不固定，由后台数据提供并且动态生成。还要能够实现修改功能。本质上是一个动态渲染可编辑Table的问题。难点在于动态构建表格并且实现数据展示和保存。

二、解决思路

(1)数据转换成表格后，处理起来就简单了，如果以常见的Table组件为例，只需要构建columns和dataSource两个数组数据即可渲染出表格；

(2)渲染出表格后，表格每一个余下的单元格都要可输入，可以考虑单元格利用render渲染出Input组件，通过Input的操作onChange或onBlur去改变数据并存储。

(3)数组是引用类型，可以利用引用类型只要没有深拷贝或改变指针指向内存地址就不变的原理，方便记录操作后的数据。

三、解决方法(以React结合ant design UI的Table组件为例)：

(1)动态构建colu