antd vue 位置变动 固钉消失

antd vue 位置变动 固钉消失

前言

这是我的第一篇学习笔记，也算是为“强迫自己养成记录学习习惯”迈出第一步了，还是很开心，以前都是写到一半就没有下文了，如果你们有推荐的学习方法，欢迎留言，最后非常欢迎大家指出下文不足的地方。

背景

antd-vue的table控件里是没有直接拖拽整行来排序的，我们可以通过table的设置行属性：customRow 来拖拽排序

html

```javascript

:dataSource="tableData"

:pagination="false"

rowKey='id'

:customRow="customRow"

bordered>

....

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属性，望大佬们有知道多多指教。

谨以此片，勉励自我，如果对你有一点帮助，那我会很开心的。