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

要在vxetable组件中实现拖拽更改顺序，可以使用Sortable.js库来帮助处理拖拽的事件。以下是实现的步骤：

1. 安装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 Sortable from 'sortablejs';

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Mike', age: 25 },
        { id: 3, name: 'Lisa', age: 30 },
        { id: 4, name: 'Tom', age: 35 }
      ],
      columns: [
        { field: 'name', title: 'Name' },
        { field: 'age', title: 'Age' },
        { field: '', title: '', sortable: false, width: 50, slots: { sort: 'sort' } }
      ]
    };
  },
  mounted() {
    const el = this.$el.querySelector('.vxe-table--body-wrapper tbody');
    new Sortable(el, {
      handle: '.sortable-handle',
      onUpdate: evt => {
        const { oldIndex, newIndex } = evt;
        const row = this.tableData.splice(oldIndex, 1)[0];
        this.tableData.splice(newIndex, 0, row);
      }
    });
  }
};
</script>

在这个示例代码中，我们使用vxetable组件来渲染一个包含名称、年龄和排序列的表格。我们在排序列中添加了一个自定义的模板，用于渲染拖拽手柄。我们还在mounted生命周期钩子中，通过querySelector选择表格的tbody元素，并将其传递给Sortable.js库的构造函数。在onUpdate事件中，我们使用拖动前和拖动后的索引值来获取拖动的行，并将其重新插入到正确的位置。

注意，Sortable.js库的handle选项用于指定拖拽手柄的元素，这里我们使用了一个span元素，并将其样式设置为一个三角形，以便用户可以很容易地识别它。