iView ui Table表格拖拽排序

需求目的：拖动表格数据自定义排序，然后保存提交给后台就行了

1.在 Table 标签上设置draggable="true"或者draggable属性，开启拖拽功能
2.添加 @on-drag-drop="changeTableSort1"方法，实现拖拽逻辑

<Table height="580" :data="data1" :columns="tbColumns" highlight-row draggable @on-drag-drop="changeTableSort1" border > </Table>

js

data() {
    return {
    	dataItem1: { id: '0', exportFieldName: '', systemFieldName: '', fieldLocation: '', valueLocation: '', serialNo: '1' },
		data1: [
	        { id: '1', exportFieldName: 'FBA ID', systemFieldName: '', fieldLocation: 'A1', valueLocation: 'B1~D1', serialNo: '1' },
	        { id: '2', exportFieldName: '服务', systemFieldName: '', fieldLocation: 'A2', valueLocation: 'B2~D2', serialNo: '1' },
	        { id: '3', exportFieldName: '地址库编码', systemFieldName: '', fieldLocation: 'A3', valueLocation: 'B3~D3', serialNo: '1' },
	        { id: '4', exportFieldName: '收件人姓名', systemFieldName: '', fieldLocation: 'A4', valueLocation: 'B4~D4', serialNo: '1' },
	        { id: '5', exportFieldName: '收件人公司', systemFieldName: '', fieldLocation: 'A5', valueLocation: 'B5~D5', serialNo: '1' },
	        { id: '6', exportFieldName: '收件人地址一', systemFieldName: '', fieldLocation: 'A6', valueLocation: 'B6~D6', serialNo: '1' },
	        { id: '7', exportFieldName: '收件人地址二', systemFieldName: '', fieldLocation: 'A7', valueLocation: '', serialNo: '1' },
	        { id: '8', exportFieldName: '收件人地址三', systemFieldName: '', fieldLocation: 'A8', valueLocation: '', serialNo: '1' },
	        { id: '9', exportFieldName: '收件人城市', systemFieldName: '', fieldLocation: 'A9', valueLocation: '', serialNo: '1' },
	        { id: '10', exportFieldName: '收件人省份/州', systemFieldName: '', fieldLocation: 'A10', valueLocation: '', serialNo: '1' },
	        { id: '2', exportFieldName: '收件人邮编', systemFieldName: '', fieldLocation: 'A11', valueLocation: '', serialNo: '1' },
	        { id: '2', exportFieldName: '收件人国家代码', systemFieldName: '', fieldLocation: 'A12', valueLocation: '', serialNo: '1' },
	        { id: '2', exportFieldName: '收件人电话', systemFieldName: '', fieldLocation: 'A13', valueLocation: '', serialNo: '1' },
	        { id: '2', exportFieldName: '收件人邮箱', systemFieldName: '', fieldLocation: 'A14', valueLocation: '', serialNo: '1' },
	        { id: '2', exportFieldName: 'reference ID', systemFieldName: '', fieldLocation: 'A15', valueLocation: '', serialNo: '1' },
	        { id: '2', exportFieldName: '申报币种', systemFieldName: '', fieldLocation: 'A16', valueLocation: '', serialNo: '1' },
	        { id: '2', exportFieldName: '箱数', systemFieldName: '', fieldLocation: 'A17', valueLocation: '', serialNo: '1' }
	      ],
	      tbColumns: [
	        {
	          type: 'selection',
	          width: 50,
	          align: 'center'
	        }, {
	          title: '序号',
	          width: 50,
	          align: 'center',
	          type: 'index'
	        },
	        {
	          title: '导出字段',
	          key: 'exportFieldName',
	          align: 'center'
	        },
	        {
	          title: '系统字段',
	          key: 'systemFieldName',
	          align: 'center',
	          width: 120
	        },
	        {
	          title: '字段在Excel表格在列或行数',
	          key: 'fieldLocation',
	          align: 'center',
	          width: 100
	        },
	        {
	          title: '值在Excel表格在列或行数',
	          key: 'valueLocation',
	          align: 'center',
	          width: 100
	        },
	        {
	          title: '操作',
	          align: 'center',
	          width: 130,
        	}
      	],
     }
}
	      

methods: {
	changeTableSort1(first, end) {
      console.log('changeOrder1', first, end)
      /* 前端互换2条数据index 和 orderid */
      first = parseInt(first)
      end = parseInt(end)
      let tmp = this.data1[first]
      if (first < end) {
        for (var i = first + 1; i <= end; i++) {
          this.data1.splice(i - 1, 1, this.data1[i])
        }
        this.data1.splice(end, 1, tmp)
      }
      if (first > end) {
        for (var j = first; j > end; j--) {
          this.data1.splice(j, 1, this.data1[j - 1])
        }
        this.data1.splice(end, 1, tmp)
      }
    }
}