需求
拖拽表格的行数据，实现排序。
问题
拖拽后调用接口，但视图没变，还是原来的顺序
场景：拖拽表格行数据后，tableDataArr 中数据的 orderNum 值会改变，实现拖拽换序。
期望情况：页面根据更改后的 orderNum 重新排序。
实际情况：接口数据变了，但是页面行数据没有改变。也就是说，页面没有实现响应式更新。
尝试1：使用 $set 赋值，无效。
// 旧代码：
this.tableDataArr = arr.slice(
(this.pageNum - 1) * this.pageSize,
this.pageNum * this.pageSize
);
// 新代码：无效
this.$set(this, 'tableDataArr', arr.slice(
(this.pageNum - 1) * this.pageSize,
this.pageNum * this.pageSize
))
尝试2：赋值后使用 this.$forceUpdate() 强制更新，无效
尝试3：使用 splice() 赋值
const newArr = arr.slice((this.pageNum - 1) * this.pageSize,this.pageNum * this.pageSize)
this.tableList.splice(
0,
this.tableList.length,
...newArr
);
解决：赋值前先重置数组
// 重置 tableList，避免换序不更新页面
this.tableList = [];
// 赋值
this.tableDataArr = arr.slice(
(this.pageNum - 1) * this.pageSize,
this.pageNum * this.pageSize
);
原因
sortable.js 拖拽排序是插入，即把A插入到B之前或之后。拖拽（页面数据顺序改变了但数组没变）后，再调用换序接口，获得的数组变了，但没有引起视图的变化。
这是因为 Vue 无法监听数组顺序的改变。
拖拽方向不同，导致被替换行不同（测试需从不同拖拽方向测试）
- 拖拽行 A
- 插入行 B
- 被替换行
备注：oldIndex 指的是 A 原来的位置，newIndex 指的是 A 拖拽后的位置。
情况一：oldIndex < newIndex
- A 拖到B 后面，A 取代了 B 原来的位置；
- A 拖到B 前面，A 取代了 B 前一个属性，即C 原来的位置；
情况二：oldIndex > newIndex
- A 拖到B 后面，A 取代了 B 后一个属性，即C 原来的位置；
- A 拖到B 前面，A 取代了 B 原来的位置；
如何修改放置行的背景色
ghostClass属性：颜色名。若为空字符串表示无颜色。
如何限制可拖拽的区域、可放置区域
filter 属性：可拖拽的元素
onMove 限制可放置区域
Sortable.create(tbody, {
filter: ".common-row", // 继承属性不可拖拽
……
// 不允许拖拽到继承属性区域中
onMove(e) {
return e.related.className.indexOf("common-row") === -1;
},
});