列表拖拽排序

需求背景：

         要求在对话框中，展示的动态表格数据可以进行拖拽排序。（vue2+ElementUI）

问题描述： 
        1：不是整个进行拖拽排序，只在排序这一列拖动才可以。
        2：拖拽过后数据错乱，明明拖动了，但是对应的顺序没有变化，即顺序为3拖拽到1的位置，正确顺序还是1、2、3......，错误顺序为：3、2、1、4......

示例图： 

问题解释：
         1.指定行拖拽实现，在排序这一列给了一个类，更改的时候指定带有drag-handle类的元素作为拖拽手柄handle: '.drag-handle', 参考了http://t.csdnimg.cn/hV2EE 。相关资料： sortablejs （Sortable.js中文网）。
相关代码如下：

        安装 sortablejs： 

npm install sortablejs --save

        在 Vue 组件中使用 sortablejs： 

        2.出现数据错乱的主要原因就是row-key='id'，每一行的id都是唯一且不会重复的，若没有id可以用Math.round()随机数去代替减少重复率。因为我数据都没有id，参考使用Math.round()随机数去代替减少重复率，还是会出现重复的情况，因此又换用了++的方式。

import { dataList } from '@/api/baseData/dataListApi'

let uniqueId = 0

dataList(params).then((response) => {
	var iList1 = JSON.parse(JSON.stringify(response.data))
	// 设置sortNum字段
	iList1.forEach((item, index) => {
	  item.sortNum = index + 1
	  // Math.random() 函数的输出是伪随机的，可能会在不同的行上生成相同的值
	  // item.myId = parseInt(Math.random() * Math.random() * 10000)
	  item.myId = this.assignUniqueId()
	})
	this.$set(this, 'proData', iList1)
	this.listLoading = false
	})
	.catch(() => {
	  this.listLoading = false
	})
	.finally((_) => {
	  this.listLoading = false
	  // 在数据加载完成后，初始化拖拽功能
	  this.initDragAndDrop()
	})

assignUniqueId() {
    return ++uniqueId
},

则对应的:row-key就换成了如下形式。

:row-key="(record) => record.id ? record.id : record.myId"