el-table中的row-key

vue中key作用

key的作用就是更新组件时判断两个节点是否相同。相同就复用，不同就删除旧的创建新的。如果不添加key组件默认都是就地复用，不会删除添加节点，只是改变列表中的文本值。添加key之后，Vue对比节点内容不一致时，就会认为是两个节点，会先删除掉旧节点，然后添加新节点。

例：

el-table没有给每一行添加key时，当我们删除第二行数据时，焦点会自动聚焦在变为第二行的第三行数据按钮上。

原因：

删除一行数据时，Vue会认为我们把2变成了3，把3删除了。所以只会把第二行的数据变成第三行，但是按钮的状态会就地复用。

解决：

给每一行添加一个key，el-table设置row-key
代码1:

<el-table :row-key="record=>record.id"></el-table>// id为表格数据中的一个属性（唯一），record为每一行数据

代码2：

<el-table row-key="id"></el-table>// row-key此时不带冒号，绑定值为数据中属性id

注：表格中不建议使用index作为key，删除数据时，索引会自动连续，（1,2，3删除第2，索引会自动变成1,2，而不是1,3）所以Vue仍然会认为删除的是第3项，而不是第2项。