具有可拖动行的 Vue Table 不会导出重新排序

Vue Table with draggable rows won't get exported reordered

高 我是 Vue 编程新手,但我想使用 Vue Leaflet。所以我制作了我的程序的 thiggs 简化版本,突出了我遇到的一个主要编程问题。

代码
参见 link:https://codesandbox.io/s/icy-shadow-xpxzww?file=/index.html

目标
制作 table
1. 可拖动行
2. 可导入数据
3. 可以添加和删除数据
4.然后数据可以重新排序
5.然后导出数据
6. 全部在 html 和 js

中完成 到目前为止我做了什么
除了 4 号之外,我对所有东西都没有问题。我尝试了 vue.draggable,但是我根本无法让它重新排序。所以我使用了 HTML 拖放 API (https://www.w3schools.com/html/html5_draganddrop.asp)。当您 select 一行时,第一列将重新开始从上到下计算索引。但这导致了问题。

问题
我的代码没有将有关行重新排序的信息发送到保存文件函数的函数或方法,我不知道如何实现它。有人可以帮我吗?提前致谢。

更改 dragover 函数,使其包含来自 webdevtv 的这个 youtube 剪辑中的 array.splice 函数:https://www.youtube.com/watch?v=syfUi_n-tv8