el-table 表格结合Sortable.js快速实现拖拽

// 通过 npm安装
npm install sortablejs --save
 //导入
import Sortable from 'sortablejs'

实例：

    // 行拖拽
    const rowDrop = () => {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = state
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          if (newIndex == oldIndex) return
          _this.tableData.splice(newIndex, 0, _this.tableData.splice(oldIndex, 1)[0])
          var newArray = _this.tableData.slice(0)
          _this.tableData = []
          ctx.root.$nextTick(() => {
            _this.tableData = newArray
          })
        },
      })
    }

再mounted的时候调用一下该方法，快速实现行拖拽

 

 onMounted(() => {
      init()
      // 阻止默认行为
      document.body.ondrop = function (event) {
        event.preventDefault()
        event.stopPropagation()
      }
      rowDrop() //行拖拽
    })

组件文档:Sortable.js中文网|配置