WishMeLz

生活其实很有趣

表格拖拽Elementui+sortablejs

import Sortable from 'sortablejs';

  columnDrop() {
    let _this = this
    const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr')
    this.sortable = Sortable.create(wrapperTr, {
      animation: 180,
      delay: 0,
      onEnd: (evt: any) => {
        let clone = JSON.parse(JSON.stringify(_this.newList))
        clone.splice(evt.newIndex, 0,clone.splice(evt.oldIndex, 1)[0])
        let newArray = clone.slice(0)
        _this.newList = []
        this.$nextTick(()=>{
        _this.newList = newArray
        localStorage.setItem('orderListClo',JSON.stringify(newArray))
        })
      }
    })
  }

说明:

获取到表格的表头,newList为表格的tableColumn。内部的逻辑为 组件拖拽表头改动索引信息,oldIndex newIndex修改 Column 数据重新赋值