antd-vue表格拖拽排序

前言

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

背景

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

html

    <a-table
      :dataSource="tableData"
      :pagination="false"
      rowKey='id'
      :customRow="customRow"
      bordered>
      ....
     </a-table>

js

	// 拖动排序
    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属性，望大佬们有知道多多指教。
谨以此片，勉励自我，如果对你有一点帮助，那我会很开心的。