Sortablejs+element表格实现拖拽

需求：

1.实现单层的表格拖拽，返回拖拽之后的数据

原理：

利用sortablejs插件实现element 表格的拖拽

代码如下：

npm安装Sortablejs
可以参考中文文档http://www.itxst.com/sortablejs/neuinffi.html

表格要添加 row-key=“id” 防止数据混乱

树形表格拖拽大家可以尝试一下：

方法如下：

1. 树形结构表格任意拖拽，点击保存之后才发送请求，大家可以看这一篇笔记
   ps：插件（ant design vue）用的不一样，不过功能是一致的

2. 利用element +Sortable.js 实现树形表格的拖拽可以参考这个源码
   ps：尝试过用element+vue.draggable.next，但是不能实现行的拖拽。使用该插件的话，建议自己手写表格，尝试代码如下：

 <el-table
    ref="mutipleTable"
    :key="tableKey"
    :data="testData"
    row-key="id"
    :header-cell-style="{ background: '#eceef4' }"
  >
    <draggable v-model="testData" tag="tbody" item-key="id"> //element不允许这种写法
      <template v-for="column in columns" :key="column.label">
        <el-table-column :prop="column.prop" :label="column.label">
          <template #default="scope">
            <span>{{ scope.row[column.prop] }}</span>
          </template>
        </el-table-column>
      </template>
    </draggable>
  </el-table>

3. 把树形的表格的每一个父级看成一个组，然后参考多组间相互拖动排序，这个我没试过~

如果大家有更好的方式实现的话，欢迎告诉我~

最开心的事情就是—这个bug我解决了，学无止境！！