vue2 + elementUI + sortablejs 实现可行拖拽排序表格

需要实现表格 (可以新增行, 表格中直接编辑数据，行可上下拖动重新排序)

实现效果（整行上下拖动之后，序号变化为1，2，3.......，可根据名称看效果哦）：

初始表格：

 拖拽后：

1. 安装拖拽插件

npm install sortablejs --save

页面中引入  import Sortable from 'sortablejs'

2 . 页面 el-table中 添加 row-key="id" ，ref 创建拖拽时用到获取表格节点

<el-table max-height="350"  ref="sortTable" :data="routeprocessList" row-key="id" >
    <el-table-column width="50" align="center" prop="orderNum"> 
    </el-table-column>
</el-table>

3. mounted函数中添加拖拽方法

mounted() {
    this.rowDrop();
  },

  methods: {

   

    rowDrop（）{

      const table = this.$refs.sortTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];

        const that = this

        Sortable.create(table, {

          animation: 1000,

          onEnd({ newIndex, oldIndex }) {

            // 拖拽排序数据

            that.routeprocessList.splice(newIndex, 0, that.routeprocessList.splice(oldIndex, 1)[0])

            const newArray = that.routeprocessList.slice(0)

            that.routeprocessList = [] // 必须有此步骤，不然拖拽后回弹

            that.$nextTick(function () {

              that.routeprocessList = newArray // 重新赋值，用新数据来刷新视图

              this.updateIndex(that.routeprocessList)//更改列表中的序号，使序号1.2.3.4.....显示，不然就是行拖拽后乱序显示如:3.2.4.1...

            })

          }

        });

    }，

 

   updateIndex(routeprocessList) {

      routeprocessList.forEach((item, index) => {

        item.orderNum = index + 1;

      });

    },

 

  }