如何利用Sortable在vue3中的vxetable组件中实现拖拽更改顺序

在Vue3中，VxeTable组件的使用与Vue2中有所不同，但是实现拖拽更改顺序的方法基本相同。以下是在Vue3中使用VxeTable和Sortable.js库实现拖拽更改顺序的步骤：

1. 安装VxeTable和Sortable.js库：可以通过npm安装，也可以在HTML中引入CDN链接。

2. 在表格中添加sortable属性：在VxeTable的表格组件中添加sortable属性，这将启用Sortable.js库的功能。

3. 绑定拖拽事件：使用Sortable.js库的onUpdate事件，当拖动完成后将会触发该事件。在该事件中，可以获取拖动前和拖动后的数据，并进行相应的处理。

下面是一个实现拖拽更改顺序的示例代码：

<template>
  <vxe-table :data="tableData" :columns="columns" sortable>
    <template #name="{ row }">{{ row.name }}</template>
    <template #age="{ row }">{{ row.age }}</template>
    <template #sort="{ row }">
      <span class="sortable-handle">⠿⠿⠿</span>
    </template>
  </vxe-table>
</template>

<script>
import { ref, onMounted } from 'vue';
import Sortable from 'sortablejs';
import 'vxe-table/lib/style.css';
import { createVxeTable } from 'vxe-table';

export default {
  setup() {
    const tableData = ref([
      { id: 1, name: 'John', age: 20 },
      { id: 2, name: 'Mike', age: 25 },
      { id: 3, name: 'Lisa', age: 30 },
      { id: 4, name: 'Tom', age: 35 }
    ]);

    const columns = ref([
      { field: 'name', title: 'Name' },
      { field: 'age', title: 'Age' },
      { field: '', title: '', sortable: false, width: 50, slots: { sort: 'sort' } }
    ]);

    onMounted(() => {
      const el = document.querySelector('.vxe-table--body-wrapper tbody');
      new Sortable(el, {
        handle: '.sortable-handle',
        onUpdate: evt => {
          const { oldIndex, newIndex } = evt;
          const row = tableData.value.splice(oldIndex, 1)[0];
          tableData.value.splice(newIndex, 0, row);
        }
      });
    });

    return { tableData, columns };
  },
  components: {
    VxeTable: createVxeTable()
  }
};
</script>

在这个示例代码中，我们使用Vue3的Composition API来编写组件。我们使用ref函数来创建一个响应式的tableData和columns变量，并在setup函数中定义了onMounted生命周期钩子，在该钩子中使用querySelector选择表格的tbody元素，并将其传递给Sortable.js库的构造函数。在onUpdate事件中，我们使用拖动前和拖动后的索引值来获取拖动的行，并将其重新插入到正确的位置。

注意，我们需要引入VxeTable组件的样式文件，以及使用createVxeTable函数来创建VxeTable组件。同时，Sortable.js库的handle选项也用于指定拖拽手柄的元素，这里我们使用了一个span元素，并将其样式设置为一个三角形，以便用户可以很容易地识别它。