el-table设置row-key
·
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项。
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
18
0- 0
已为社区贡献1条内容
所有评论(0)