vue+elementUI+sortablejs --- el-table列表拖拽

前言：

　　最近很多需求都与拖拽有关，一般拖拽用的都是 vuedraggable 但是要是在el-table列表里面拖拽 当用vuedraggable去包裹table列表包外层只能拖动整个列表 包里面数据映射不上，然后就选用了我们今天的主角 sortablejs

步骤：

　　安装：

　　　　nmp: npm install sortablejs --save

　　　　bower: bower install --save sortablejs　　

　　vue引入（其他的引入方法官方文档有）：

　　　　import Sortable from 'sortablejs'

　　使用：

　　　　

<el-table id="editRankingList" :data="tableData">
</el-table>

 

mounted() {
    this.rowDrop()
  }
  rowDrop() {
    const tbody = document.querySelector('#editRankingList .el-table__body-wrapper tbody')
    const _this = this
    Sortable.create(tbody, {
      animation: 180,
      delay: 0,
      onUpdate: (event) => {
        const oldIndex = event.oldIndex,
          newIndex = event.newIndex,
          $child = tbody.children[newIndex],
          $oldChild = tbody.children[oldIndex]
        // 先删除移动的节点
        tbody.removeChild($child)
        // 再插入移动的节点到原有节点，还原了移动的操作
        if (newIndex > oldIndex) {
          tbody.insertBefore($child, $oldChild)
        } else {
          tbody.insertBefore($child, $oldChild.nextSibling)
        }
        // 更新items数组
        const item = _this.tableData.splice(oldIndex, 1)
        _this.tableData.splice(newIndex, 0, item[0])
      }
    })
  }

 

因为如果不在onUpdate做处理 只会有个页面上的变化，数组源并没有变，我之前用的是直接重新去给tableData赋值强制给他更新（请求接口的情况下）最近我用的是KV配置全程前端写在这样去处理用户体验不好

所以采用了上面代码块的方法，提供方法的大佬：https://zhuanlan.zhihu.com/p/223090029