Antd 可编辑表格

可编辑表格效果图.png

最近接到一个小需求，将页面上的原本仅展示信息的表格增加一个功能，即支持直接在页面上进行编辑。原表格也是借助 antd 生成的，在查阅了官方文档后，发现官网给出的示例里居然就有可编辑表格，真是太贴心了。
可编辑表格的代码整体结构如下，首先是创建可编辑单元格 EditableCell 子组件，然后是创建可编辑表格 EditableTable （其中使用了子组件 EditableCell ），由于表格的原本功能仅仅是展示信息，并不包括接收用户输入（这是 Form 表单的职责），所以最后还需要用 Form.create() 封装一下。

代码整体结构.png

const EditableFormTable=Form.create()(EditableTable);

官网示例代码就不贴了，见链接https://ant.design/components/table-cn/#components-table-demo-edit-cell。

项目中实际使用的可编辑表格在用户编辑完成点保存按钮后，先是通过 post 请求将新的数据保存到服务器（新的数据通过 post 请求的 body 传输），然后再通过 get 请求去获取新的数据，最后是更新 UI （这里看上去 get 请求更新数据显得有点多余，因为数据是本地修改的，所以在本地展示其实不必再去请求服务器，不过如果别人也在他的本地修改了数据，那这个机制就有必要了，便于数据同步）。相关代码如下：

同步数据代码.png

最后说下自己踩的一个关于 antd 的坑，就是如果不设置可编辑图表的各列宽度，那么在点击某行的“编辑”后，可能会造成所有行的高度都变大，这会导致用户点击某行的“编辑”后，由于前面各行高度也变大了，用户目标编辑的行会被挤到下面，影响体验，如图所示

所有行都变高.png

给各列设置宽度后（相对值或绝对值均可），就不会出现以上问题。找了好久的原因。。。