ant-design-vue表格实现拖拽排序

    <a-table
      :columns="columnsModel"
      :data-source="dataModel"
      :customRow="customRow"
    >
     
    </a-table>

​

 :customRow="customRow"重点

 data(){
   return{
      sourceObj:null,
      targetObj:null,
      dataModel:[],
      columnsModel:[],
    }
}
 
 
methods:{
    customRow(record, index) {
      console.log('customRow', record, index)
      return {
        domProps: {
          draggable: true
        },
        style: {
          cursor: 'move'
        },
        on: {
          // 鼠标移入
          mouseenter: event => {
            var ev = event || window.event // 兼容IE
            ev.target.draggable = true
          },
          // 开始拖拽
          dragstart: event => {
            var ev = event || window.event
            ev.stopPropagation() // 阻止冒泡
            this.sourceObj = record // 得到源目标数据序号
            console.log('sourceCode', this.sourceObj)
          },
          // 拖动元素经过的元素
          dragover: event => {
            var ev = event || window.event
            ev.preventDefault()
          },
          // 鼠标松开
          drop: event => {
            var ev = event || window.event
            ev.stopPropagation()
            this.targetObj = record// 得到目标数据
           //获取想要换位置的两个下标
            let sourceindex = ''
            let targetindex = ''
            this.dataModel.map((item, index) => {
              if (this.sourceObj.content == item.content) {
                sourceindex = index
              } 
               if (this.targetObj.content == item.content) {
                targetindex = index
              }
            })
            // 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
            let arr=[]
            this.dataModel.map((item,index)=>{
              if(sourceindex==index){
                    arr.push(this.targetObj)
              }else  if(targetindex==index){
                    arr.push(this.sourceObj)
              }else{
                arr.push(item)
              }
            })
            this.dataModel=arr
          }
        }
      }
    }
}