Vue3 + Ts 实现 Ant Design Vue 中 table 组件行拖拽排序

前言

项目整体架构使用的 Vue3 + TypeScript + Ant Design Vue，需求为 table 表格组件支持行数据拖拽排序。本文主要用于记录。

一、新建 useTableDraggable.ts 文件，代码如下。

/**
 * useTableDraggable.ts 表格列拖拽
 * @param dataSource table数据集合
 * @returns customRow 行属性方法
 */
export default (dataSource: Array) => {
  let dragItem: T
  let targItem: T
  const customRow = (record: T) => {
    return {
      draggable: true,
      ondrag(e: DragEvent) {
        dragItem = record
      },
      ondrop(e: DragEvent) {
        targItem = record
      },
      ondragend(e: DragEvent) {
        if (dragItem !== targItem) {
          const dragItemIndex = dataSource.indexOf(dragItem);
          const targItemIndex = dataSource.indexOf(targItem);
          // 解构交换
          [dataSource[dragItemIndex], dataSource[targItemIndex]] = [dataSource[targItemIndex], dataSource[dragItemIndex]]
        }
      },
      ondragover(e: DragEvent) {
        return false
      }
    }
  }

  return {
    customRow
  }
}

二、使用

 参考地址：https://github.com/vueComponent/ant-design-vue/issues/1804