vue + sortable 拖拽移动表格

vue + sortable 拖拽移动表格

<el-table sticky ref="list" :max-height="listScope.height" row-key="id" :data="page_info.data.data">
    <el-table-column :key="'col_'+index" :prop="dropCol[index].field" :label="item.title"
                        v-for="(item,index) in col"
                        :min-width="item.title=='车型'||item.title=='车架号'?200:(item.title.length *14)+50">
     </el-table-column>
</el-table>

col 和 dropCol 可以是同一个数组

columnDrop() {
                    const _this = this;
                    const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
                    let Nodeth = this.$el.querySelector('.el-table__header-wrapper tr')
                    Sortable.create(wrapperTr, {
                        animation: 180,
                        delay: 0,
                        onEnd: evt => {

                            console.log(evt.oldIndex)
                            console.log(evt.newIndex)

                            // const newList = this.dropCol.slice()
                            // const targetRow = this.dropCol.splice(evt.oldIndex, 1)[0]
                            var storage = Nodeth.children[evt.newIndex], NodeoldLi = Nodeth.children[evt.oldIndex];
                            // 先删除移动的节点
                            Nodeth.removeChild(storage)
                            // 再插入移动的节点到原有节点，还原了移动的操作
                            if (evt.newIndex > evt.oldIndex) {
                                Nodeth.insertBefore(storage, NodeoldLi)
                            } else {
                                Nodeth.insertBefore(storage, NodeoldLi.nextSibling)
                            }
                            // 更新items数组
                            var item = this.dropCol.splice(evt.oldIndex, 1)
                            this.dropCol.splice(evt.newIndex, 0, item[0])
                        }
                    });
                },

wrapperTr 可删除 替换为 Nodeth