el-table fixed 与sortableJs冲突 / e

• sortableJs 与 fixed同时存在时，el-table中排序失效。

  el-table-column设置了fixed="left"，el-table实际上会创建另外一个el-table__fixed表格，
  fixed="right"会创建另一个el-table__fixed-right表格；

所以我们不应该去获取 ".el-table body-wrapper > table > tbody"
而是去获取".el-table__fixed-body-wrapper > table > tbody"

// 初始化排序功能
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);

            this.handleConfirmSort();    // axios...
        },
    });
},

这样，el-table中设置fixed 同样也可以排序了

---

• 可以成功排序之后，视图层数据有误。

  
  

这也是由于设置fixed后，el-table会创建新的el-table__fixed表格的原因。
打开f12可以看到el-table原本table的tbody中，这一列的数据是正确的。
而在el-table__fixed中的table的tbody中，这数据依然是原来的。

所以这里的思路就是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);

            let nameList = this.data.details.map(
                (it) => it.projectName
            );
            console.log("nameList", nameList);

            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);
        },
    });
},

html

<template>
    <div class="collapse-wrapper" :class="'collapse-item-id-' + dataId">
        ...
    </div>
</template>