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

前言

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

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

/**
 * useTableDraggable.ts 表格列拖拽
 * @param dataSource table数据集合
 * @returns customRow 行属性方法
 */
export default <T>(dataSource: Array<T>) => {
  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
  }
}

二、使用

<template>
  <a-table
    bordered
    :dataSource="dataSource"
    :columns="columns"
    :customRow="customRow"
  ></a-table>
</template>

<script lang="ts">
import { defineComponent, ref} from 'vue'
import useTableDraggable from '@/hooks/useTableDraggable'

export default defineComponent({
  name: 'Table',
  setup() {
    const dataSource = ref([
      { title: '张三', dataIndex: 'name' },
      { title: '男', dataIndex: 'sex' },
      { title: '18', dataIndex: 'age' }
    ])
    const { customRow } = useTableDraggable(dataSource.value)

    return {
      dataSource,
      columns:[
        { title: "名称", dataIndex: "title" },
        { title: "键值", dataIndex: "dataIndex" }
      ],
      customRow
    }
  }
})
</script>

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