Vue的diff算法导致的bug总结

问题

一个很简单的编辑条目的需求，可以看一下实现页面：

很简单的用户编辑删除的功能，但是在点击新增的时候确出现了问题，访问权限没有按需下挪

key在Vue的虚拟dom算法中的应用

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

所以上述的问题就很明显了，是table里默认会在diff阶段复用顶部元素，在末尾append一个tr元素，只将值往下挪，会造成组件内容都是上一个节点的，而这个表格里访问权限是个memberInput组件，不是个纯净的input，是需要初始化才能使用的，所以复用后值还是之前的。

element-ui中row-key属性

element-ui提供一个row-key属性，它的定义如下：

行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
所以我们在在el-table那一层加个row-key="id"就可以，这样就能以id作为key，不去复用节点。