element-ui 實現表格拖拽功能

 Element-UI Table組件目前沒有拖拽的功能，我們可以通過引入sortable包可以實現拖拽功能。

步驟如下：

1.安裝sortable.js的包

   npm install sortable.js --save

 

2.代碼中引入sortable.js

import Sortable from 'sortablejs'

 

2.在vue文件中添加方法

  //行拖拽
    rowDrop() {
      let tbody = document.querySelector('.el-table__body-wrapper tbody')
      let _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    

    //列拖拽
    columnDrop() {
      let wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          let oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }