利用sortablejs对elementui中的table进行拖拽排序

 Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素，特点：体积小、功能强大。

官方Demo：SortableJS

Sortable.js可以实现同组内上下拖动元素，也可以实现不同组内互相拖动元素。这里主要说的是组内上下拖动的情况

一.安装

npm i sortablejs -S

二.引用

引用：在需要用到Sortable的 *.vue 中的script部分引用。也可以在main.js中入注册到Vue的根实例中

import Sortable from 'sortablejs'

三.使用

methods: {
    //拖拽排序处理
    rowDrop() {
      const el = this.$refs.equipTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      let _this = this
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
        },
        onEnd({ newIndex, oldIndex }) {
          console.log('TabsTreeTable -> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
          let tableData = _.cloneDeep(_this.tableData);
          //交换处理
          const newOrderId = tableData[newIndex].order_id
          const oldOrderId = tableData[oldIndex].order_id
          tableData[newIndex].order_id = oldOrderId
          tableData[oldIndex].order_id = newOrderId
          const currRow = tableData.splice(oldIndex, 1)[0];
          tableData.splice(newIndex, 0, currRow);
          //促使表格动态渲染
          Object.assign(_this.tableData,_.cloneDeep(tableData));
          console.log(_this.tableData)
        }
      });
    }

移动的过程中，表格前面的序号也会跟着一起移动，处理方法，使用fixed固定序号那一列即可

              <el-table-column label="序号"
                               type="index"
                               fixed
                               width="50">
              </el-table-column>

注意：el-table中必须设置 row-key="id"，否则会导致排序不成功。原因：由于vue加载循环机制，在进行删除时，一定要添加key，跟使用v-for循环一样都需要添加绑定key。

 四.参考文章

sortablejs — 强大的拖拽库

五.遇到的问题

1.解决排序之后刷新数据，显示和实际数据不一致的问题

本来想的是在排序之后通过请求表格的数据以达到更新表格的问题，但是实践发现：这样操作之后数据是发生了改变，但是页面的展示的数据和实际的数据的顺序不一样，后来无意间在请求数据之前把数据置空

发现问题解决了，至于原因，目前还不知道，有知道的可以在评论区讨论一下

2.动态修改一些配置，比如disabled

options 是 sortable 配置项，具体配置详情查看Sortable 配置文档

 注意不要漏了options,楼主开始就是漏了，导致设置无效