elementUI的table使用Sortable进行拖拽并保存

前言

背景：近期有产品需求，需要表格可以拖拽来实现列表排序的功能，并且列表任一项可以置顶，置顶永远在最上面且置顶和非置顶不能交叉，记录以下

---

一、安装Sortable

sortable.js中文文档

npm install sortable.js --save
//或者
npm i -S vuedraggable

说明：vuedraggable依赖 Sortable.js，所以安装了vuedraggable，我们便可以直接引入Sortable使用Sortable的特性。vuedraggable是Sortable一种加强，实现组件化的思想，可以结合Vue，使用起来会更方便

二、使用Sortable

import Sortable from 'sortablejs'

准备工作到此结束，开始垒码

三、实例

<el-table
  size="mini"
   ref="multipleTable"
   :data="tableData"
   empty-text=" "
   row-key="id"
   :key="sortKey"
   fit
   @row-click="changeCommodity"
   @sort-change="handleSortChange"
   @selection-change="handleSelectionChange"
 >
    <el-table-column align="center" label="排序" width="80">
       <template slot-scope="{}">
         <el-popover
           style="opacity: 0.6"
           placement="top-start"
           width="200"
           trigger="hover"
           content="拖拽排序"
         >
           <el-button slot="reference" style="border: none"
             ><p class="iconfont qt-acp-drag" style="color:#333">p
           >el-button>
         el-popover>
       template>
     el-table-column>
     <el-table-column label="商品信息" min-width="260">
       <template slot-scope="scope">
         <div class="goods-inner-item">
           <div class="goods-inner-item__left">
             <div class