如何在vue3项目中的vxecolumn组件里使用sortable实现拖拽排序的功能

在Vue3项目中使用VxeColumn组件实现sortable的方法如下所示：

1. 首先安装sortablejs依赖

npm install sortablejs --save

2. 在Vue3项目中引入sortable.js文件

import Sortable from 'sortablejs';

3. 在VxeTable的columns属性中，使用VxeColumn组件并在其中添加slot插槽

<vxe-table :data="tableData">
  <vxe-column field="id" title="ID" sortable></vxe-column>
  <vxe-column field="name" title="Name" sortable>
    <template #header="{ column }">
      <span class="drag-handle">☰</span>
      {{ column.title }}
    </template>
  </vxe-column>
  <vxe-column field="age" title="Age" sortable></vxe-column>
</vxe-table>

4. 在VxeColumn组件的header插槽中添加拖拽排序的图标

<vxe-column field="name" title="Name" sortable>
  <template #header="{ column }">
    <span class="drag-handle">☰</span>
    {{ column.title }}
  </template>
</vxe-column>

5. 在VxeTable的mounted函数中，对VxeColumn组件进行初始化sortable

<template>
  <vxe-table :data="tableData" ref="xTable"></vxe-table>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Tom', age: 18 },
        { id: 2, name: 'Jerry', age: 20 },
        { id: 3, name: 'Lucy', age: 22 },
        { id: 4, name: 'John', age: 24 },
      ],
    };
  },
  mounted() {
    const el = this.$refs.xTable.getTableColumn().$el.querySelector('.vxe-table--header');
    Sortable.create(el, {
      animation: 150,
      handle: '.drag-handle',
      onEnd: ({ oldIndex, newIndex }) => {
        const data = [...this.$refs.xTable.getTableData()];
        const item = data.splice(oldIndex - 1, 1)[0];
        data.splice(newIndex - 1, 0, item);
        this.$refs.xTable.loadData(data);
      },
    });
  },
};
</script>

以上是在Vue3项目中使用VxeColumn组件实现sortable的方法，你可以根据自己的需求进行修改。