问题1：sortableJs 与 fixed同时存在时，el-table中排序失效。
el-table自身有个表格；
el-table-column设置了fixed="left"，el-table实际上会创建左侧【el-table__fixed】表格；
el-table-column设置了fixed="right"，会创建右侧【el-table__fixed-right】表格；
el-table最多可能创建3个表格；
所以我们不应该去获取非固定列的表格 (.el-table body-wrapper > table > tbody);
而是去获取固定列(.el-table__fixed-body-wrapper > table > tbody); 这样就能drag排序了;
// 初始化排序功能
initSort() {
// let className =".el-table body-wrapper > table > tbody";
let className = ".el-table__fixed-body-wrapper > table > tbody";
const el = document.querySelector(className);
Sortable.create(el, {
handle: ".table-row-drag",
onEnd: (evt) => {
// 将拖拽的这条数据在原数组中修改成拖拽后的顺序
const currentRow = this.data.details.splice(
evt.oldIndex,
1
)[0];
this.data.details.splice(evt.newIndex, 0, currentRow);
let nameList = this.data.details.map(
(it) => it.projectName
);
console.log("nameList", nameList); // 打印nameList, 数据修改正确；
},
});
},
问题2：成功排序后，视图层数据有误
打开f12可以看到el-table原本table的tbody中，这一列的数据是正确的 (下方图1)；
而在el-table__fixed中的table的tbody中，这数据依然是旧的 (下方图2)；
所以这里的思路就是el-table重新渲染，可以在排序接口成功后重新调用table数据的接口 或者 重置一下table的数据即可；
最终js
initSort() {
// 封装成组件会被循环出多个，所以此处通过dataId唯一值，document.querySelector才能找到;
let className = ".collapse-item-id-" + this.dataId;
className = className + " .el-table__fixed-body-wrapper > table > tbody";
const el = document.querySelector(className);
Sortable.create(el, {
handle: ".table-row-drag",
onEnd: (evt) => {
// 将拖拽的这条数据在原数组中修改成拖拽后的顺序
const currentRow = this.data.details.splice(
evt.oldIndex,
1
)[0];
this.data.details.splice(evt.newIndex, 0, currentRow);
// 这里我采用的是清空table表，200毫秒后重新赋值，也就会重新渲染table表，这样就解决了table视图数据错误的问题;
let temp = JSON.parse(JSON.stringify(this.data.details));
this.data.details = [];
this.loading = true;
setTimeout(() => {
this.data.details = temp;
this.loading = false;
this.handleConfirmSort(); // 调取axios接口设置数据排序
}, 200);
},
});
},
