需要实现如下需求，现有一个表格，每行数据都能进行拖拽，进行上下移动，并序号自动更新这样的UI效果是可以有组件支持的，那就是SortTable.js。别人造好的轮子，直接拿来用就行了。那么问题在哪里呢？在vue中使用sortTable组件拖拽表格行数据后，影响的只是页面展示效果，实际的数据并没有发生变化，还是原来的顺序。vue是基于数据驱动的，做一些交互操作都是直接修改数据，页面直接渲染的，比如当前页面的字段编码下拉框的选择，这里如果值改变，同时要更改本行的全部数据。所以，如果拖拽后不影响实际的数据，那其他相关的数据交互操作就会出现问题。
1.安装
npm install sortablejs --save
2.在需要实现表格拖拽的 .vue 文件中引入 sortablejs：
import Sortable from 'sortablejs'
解决思路：
1、先缓存一个与实际数据一致的数组。
2、在拖拽时，获取到原下标和拖拽后的下标，根据等同页面展示效果的拖拽算法，修改缓存的数组的顺序。
3、根据缓存的数组，重新渲染表格数据，保证页面效果与实际数据一致
代码实现：
1、实现等同页面效果的拖拽排序方法，利用新数组实现修改数组元素顺序的功能
// 转换缓存数组顺序
getOrderList(oldIndex, newIndex, oldList) {
// 新数据集合
const newList = [];
// 第一种情况 oldIndex < newIndex 1->3
if (oldIndex < newIndex) {
for (let i = 0; i < oldList.length; i++) {
// 超过移动下标范围的 数据(小于第一个下标或者大于最后一个下标) 直接赋值
if (i < oldIndex || i > newIndex) {
newList[i] = oldList[i];
} else {
// 当前下标 小于 最后一个下标时
if (i < newIndex) {
// 取下标向后偏移1的数据
newList[i] = oldList[i + 1];
// 当前下标 等于 最后一个下标时
} else {
// 取第一个下标的数据
newList[i] = oldList[oldIndex];
}
}
}
// 第二种情况 oldIndex > newIndex 3->1
} else if (oldIndex > newIndex) {
for (let i = 0; i < oldList.length; i++) {
// 超过移动下标范围的 数据(大于第一个下标或者小于最后一个下标) 直接赋值
if (i > oldIndex || i < newIndex) {
newList[i] = oldList[i];
} else {
// 当前下标 等于 最后一个下标时
if (i === newIndex) {
// 取第一个下标的数据
newList[i] = oldList[oldIndex];
// 当前下标 大于 最后一个下标时
} else if (i > newIndex) {
// 取下标向前偏移1的数据
newList[i] = oldList[i - 1];
}
}
}
// 第三种情况 oldIndex = newIndex 1->1
} else {
for (let i = 0; i < oldList.length; i++) {
// 直接赋值
newList[i] = oldList[i];
}
}
return newList;
},
2、初始化拖拽方法，在其中重新生成排序后的数组，并且重新渲染表格
rowDrop() {
const tbody = document.querySelector(".fields-table tbody");
const _this = this;
this.$nextTick(() => {
Sortable.create(tbody, {
disabled: false, // boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；
handle: ".el-icon-s-operation", // 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
animation: 150, // 拖拽延时
onEnd({ oldIndex, newIndex }) {
// 转换缓存数组顺序
_this.tableData = _this.getOrderList(
oldIndex,
newIndex,
_this.tableData
);
// console.log(" _this.tableData", _this.tableData);
// 缓存数据数组 赋值给 实际数据数组
_this.tableData = JSON.parse(JSON.stringify(_this.tableData));
// 重新渲染表格(必须重新渲染,否则页面表格拖拽后,显示数据不正确)
_this.randomKey = Math.random();
// _this.$forceUpdate();
},
});
});
},
3、由于重新渲染表格，导致拖拽的事件被移除，监听表格数据变化，重新渲染拖拽事件
watch: {
/**
* 监听表格数据变化，重新渲染拖拽事件
*/
tableData: {
handler(val) {
this.$nextTick(() => {
// 绑定拖拽事件
this.rowDrop();
});
},
immediate: true,
},
},
SortTable配置项
sort：boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序；
delay：number 定义鼠标选中列表单元可以开始拖动的延迟时间；
disabled：boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；
animation：number 单位：ms，定义排序动画的时间；
handle：selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；
filter：selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；
draggable：selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放
ghostClass：selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式；
chosenClass：selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增加一个class；
forceFallback：boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；
fallbackClass：string 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；
scroll：boolean 默认为true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动
事件
onChoose：function 列表单元被选中的回调函数
onStart：function 列表单元拖动开始的回调函数
onEnd：function 列表单元拖放结束后的回调函数
onAdd：function 列表单元添加到本列表容器的回调函数
onUpdate：function 列表单元在列表容器中的排序发生变化后的回调函数
onRemove：function 列表元素移到另一个列表容器的回调函数
onFilter：function 试图选中一个被filter过滤的列表单元的回调函数
onMove：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
onClone：function 当创建一个列表单元副本的时候的回调函数
事件对象
事件对象在各个函数中略有不同，可通过输出对象查看对象的属性，下面简单列举几个：
to：HTMLElement--移动到列表容器
from：HTMLElement--来源的列表容器
item：HTMLElement--被移动的列表单元
clone：HTMLElement--副本的列表单元
oldIndex：number/undefined--在列表容器中的原序号
newIndex：number/undefined--在列表容器中的新序号
方法
option(name[,value])
获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋给第一个参数所对应的值；
closest
没理解
toArray()
序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中
sort()
通过自定义列表单元的data-id的数组对列表单元进行排序
save()
destroy()