element ui el-table 实现拖拽效果

https://blog.csdn.net/weixin_46527264/article/details/111693851  参考这个

 

 

https://www.cnblogs.com/jin-zhe/p/10181852.html

https://www.cnblogs.com/e0yu/p/11163924.html

引入三方插件   sortable.js

 

1.引入sortable.js的包:

npm install sortablejs --save

2. 引用el-table 中   导入

import Sortable from 'sortablejs'

3.mounted(){

 this.rowDrop()
    this.columnDrop()

}

4.

//行拖拽           //tableData 表格数据
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    //列拖拽             dropCol 表格定义的header
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }