前言
这是我的第一篇学习笔记，也算是为“强迫自己养成记录学习习惯”迈出第一步了，还是很开心，以前都是写到一半就没有下文了，如果你们有推荐的学习方法，欢迎留言，最后非常欢迎大家指出下文不足的地方。
背景
antd-vue的table控件里是没有直接拖拽整行来排序的，我们可以通过table的设置行属性：customRow 来拖拽排序
html
```javascript
<a-table
:dataSource="tableData"
:pagination="false"
rowKey='id'
:customRow="customRow"
bordered>
....
</a-table>
js
```javascript
// 拖动排序
customRow(record, index) {
return {
// FIXME: draggable： true 不生效还不晓得是什么原因，先使用鼠标移入事件设置目标行的draggable属性
props: {
// draggable: 'true'
}
style: {
cursor: 'pointer'
},
on: {
// 鼠标移入
mouseenter: (event) => {
// 兼容IE
var ev = event || window.event
ev.target.draggable = true
},
// 开始拖拽
dragstart: (event) => {
// 兼容IE
var ev = event || window.event
// 阻止冒泡
ev.stopPropagation()
// 得到源目标数据
this.sourceObj = record
},
// 拖动元素经过的元素
dragover: (event) => {
// 兼容 IE
var ev = event || window.event
// 阻止默认行为
ev.preventDefault()
},
// 鼠标松开
drop: (event) => {
// 兼容IE
var ev = event || window.event
// 阻止冒泡
ev.stopPropagation()
// 得到目标数据
this.targetObj = record
}
}
}
},
```
得到源元素和目标元素数据就可以进行排序了，可以进行下标交换位置了。
这里要说一下，不知道为什么直接设置属性draggable为true 不生效，可能是我写的方式不对，后面就想到鼠标移入的设置行元素draggable属性，望大佬们有知道多多指教。
谨以此片，勉励自我，如果对你有一点帮助，那我会很开心的。
