如何在vue3+ts的项目中实现vxetable的拖拽排序功能

要在Vue3+TypeScript项目中实现VxeTable的拖拽排序功能，可以按照以下步骤进行：

1. 安装VxeTable和相关依赖：

npm install xe-utils @vue/composition-api vxe-table@next

2. 在Vue3项目中引入Composition API：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createHead } from '@vueuse/head'
import { useRoute, useRouter } from 'vue-router'
import { useMeta } from 'vue-meta'
import { ref, reactive, toRefs, onMounted, onUnmounted } from 'vue'
import { VXETable } from 'vxe-table'

import App from './App.vue'
import routerConfig from './router'

const app = createApp(App)

app.use(router)
app.use(createHead())
app.use(VXETable)

app.mount('#app')

3. 创建一个Vue3组件，并在其中引入VxeTable和相关依赖：

<template>
  <div>
    <vxe-table ref="xTable" :columns="columns" :data="data" @sort-change="handleSortChange" @header-dragend="handleHeaderDragend"></vxe-table>
  </div>
</template>

<script lang="ts">
import { ref, reactive } from 'vue'
import { VXETable, ColumnInfo } from 'vxe-table'

export default {
  setup () {
    const xTable = ref(null)
    const columns = ref([
      {
        field: 'name',
        title: 'Name',
        sortable: true
      },
      {
        field: 'age',
        title: 'Age',
        sortable: true
      },
      {
        field: 'gender',
        title: 'Gender',
        sortable: true
      }
    ])
    const data = ref([
      { name: 'John', age: 21, gender: 'Male' },
      { name: 'Mary', age: 28, gender: 'Female' },
      { name: 'Bob', age: 35, gender: 'Male' }
    ])
    const handleSortChange = (params: { column: ColumnInfo, prop: string, order: string }) => {
      console.log('Sort Change:', params)
    }
    const handleHeaderDragend = (params: { columns: ColumnInfo[] }) => {
      console.log('Header Dragend:', params)
    }

    onMounted(() => {
      VXETable.setup({
        table: {
          mouseConfig: {
            selected: {
              mode: 'single'
            }
          }
        }
      })
    })

    onUnmounted(() => {
      VXETable.destroy()
    })

    return {
      xTable,
      columns,
      data,
      handleSortChange,
      handleHeaderDragend
    }
  }
}
</script>

4. 然后，在handleHeaderDragend方法中，可以获取到排序后的列信息，然后根据这些信息修改data中的数据以实现拖拽排序功能。

这样，就可以在Vue3+TypeScript项目中实现VxeTable的拖拽排序功能了。