[JavaScript知识库]antd 结合vue 行拖拽

      <a-table :columns="columns1"
               :pagination="false"
               :data-source="data1"
               rowKey='id'
               :customRow="customRow"
               bordered>
        <span slot="customTitle">Name</span>
      </a-table>

data1为获取到的数据?rowKey为key值（值唯一即可）

下面为拖拽方法

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
        let data2 = this.data1.filter(item=>item.id === this.sourceObj.id)
????????// 过滤出来源目标数据
        this.data1 = this.data1.filter(item=>item.id !== this.sourceObj.id)
????????// 过滤出来除了源数据的数据
        this.data1.splice(index, 0,...data2)
????????// 将源数据插入到相应的数据中去
      }
    }
  }
},

上图为初始

?上图为正在操作

?

上图为拖拽完毕

另外，该方法仅为拖拽位置，并不能使两条数据互换位置，想要互换位置，在得到目标数据后进行相应的数据处理即可。