项目中使用 ElementUI 的 el-table 生成的表格,需要使用 Sortable.js 实现拖拽排序的功能,正常的拖拽没问题,但是拖拽后的数组顺序与 el-table 渲染的数据不一致,具体错误如下图所示:
查找原因发现,应该是未指定 el-table 行数据的 Key,导致 Table 渲染错误,遂添加 row-key=\"index\"
,然而问题还是没有解决。
因为该组件通过 value 实现双向绑定,数据是通过 v-model 传递过来的,考虑数组数据按地址传值,遂使用 slice() 拷贝了新的数据,最终解决问题。
总结:
1、配置 row-key 唯一,避免 el-table 渲染数据错误;
2、拷贝数组数据,避免引用传值及双向绑定更新数据导致的错误。