关于表格内容重新编辑的一些思路

关于Table表格内容重新编辑的一些思路（前端）

近期处理了许多关于表格内容重新编辑这样的需求，有过各种尝试，最终总结了一个比较完善的版本。不拘泥什么框架，什么ui组件库，只提供一个思路，个人观点，希望能对大家有所帮助。

下述实现使用的angular框架及zorro组件库。实现的效果大致如下：
下图是未编辑时的页面

下图时编辑时的界面

实现过程如下：

1.原始数据，暂时取名teamData，是json数组的格式

2.表格渲染是使用for循环的，teamData中的每条数据都对应两个ui，一个是展示数据是用的ui，一个是编辑时用的ui
如上，给teamData的每条数据绑定了一个isEdit属性，用来标识当前项是否处于编辑状态，原数据上并没有这条属性，所以默认会被当成false，每次点击编辑按钮时将该值设成true，利用ngIf/v-if就可以控制展示态和编辑态的ui显隐，视图切换部分就没有问题了

3.定义一个空数组editArray，用来存放当前处于编辑态的项，话接上题，每次点击编辑按钮时，除了将该项的isEdit置为true，还需要将该项完整的push到editArray中，取消编辑时再将该项从数组中删除。这一步也是准备工作，具体用处下面会讲。

4.对于数据展示的内容模块，我们使用teamData的原始数据；对于编辑数据的内容模块，在双向绑定时我们绑定的是editArray中的相关项，如下图示：


插播：nz-select如何跟一个对象双向绑定以及怎么回显，搞得我头都大了，被折磨了一整天才终于知道怎么用。首先想要数据回显，在select的选项里一定要有那条要回显的数据，不然回显不了，然后，一定要用compareWith，这个官方有示例nz-select，直接搜compareWith就好了

回到上面的两块ui，为什么第一块绑定时使用原teamData的数据，第二块使用自己定义的editArray数据？
首先双向绑定在你视图做修改时同时影响你的数据，也就是你select之后你的teamData就直接被改了，这就有个问题，如果你先点了编辑，做了一些修改，然后又不想保存，你点了取消，结果发现数据还是被改了。所以这一步就是为“取消”操作做准备，editArray的用处就体现了。当然，可以选择单向的绑定，不过这就有点绕远路了，在点击保存时需要做更多的赋值操作。

5.最后一步，作了修改之后点击保存，这时只要从editArray中取得你当前编辑的这一项的全部内容，替换掉teamData的那一项即可，再将该项的isEdit置为false，隐藏掉编辑框，大功告成。

当然，依旧可以选择将输入框与原始数据双向绑定，不过需要另外保留一份原始数据的备份，取消时用来做数据还原

总结：
1.isEdit控制当前编辑状态
2.editArray用来暂存编辑项，防止对原始数据的干扰