ant design表格实现拖拽

1,463 阅读1分钟

html

<a-table
  :columns="columns"
  :dataSource="dataList"
  :customRow="customRow"
  :rowKey="record => record.id"
  :pagination="false">
</a-table>

js

customRow (record, index) {
      return {
        style: {
          cursor: 'pointer'
        },
        on: {
          mouseenter: (event) => {
            var ev = event || window.event
            ev.target.draggable = true
          },
          dragstart: (event) => {
            // 开始拖拽
            var ev = event || window.event
            ev.stopPropagation()
            this.startObj = record //开始拖拽表格数据
          },
          dragover: (event) => {
            // 拖动元素经过的元素
            var ev = event || window.event
            ev.preventDefault()
          },
          drop: (event) => {
            // 鼠标松开
            var ev = event || window.event
            ev.stopPropagation()
            this.endObj = record 
            this.dropEnd() //拖拽完成后进行的操作
          }
        }
      }
    }