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

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

1. 首先安装sortablejs依赖

npm install sortablejs --save

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

import Sortable from 'sortablejs';

3. 在vxetable组件中使用onMounted钩子函数，在mounted函数中初始化sortable

<template>
  <vxe-table
    :data="tableData"
    :columns="tableColumns"
    ref="xTable"
    @mounted="onMounted"
  ></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 },
      ],
      tableColumns: [
        { field: 'id', title: 'ID', sortable: true },
        { field: 'name', title: 'Name', sortable: true },
        { field: 'age', title: 'Age', sortable: true },
      ],
    };
  },
  methods: {
    onMounted() {
      const el = this.$refs.xTable.$refs.table.$el.querySelector('.vxe-table--body tbody');
      Sortable.create(el, {
        animation: 150,
        handle: '.drag-handle',
        onEnd: ({ oldIndex, newIndex }) => {
          const data = [...this.tableData];
          const item = data.splice(oldIndex, 1)[0];
          data.splice(newIndex, 0, item);
          this.tableData = data;
        },
      });
    },
  },
};
</script>

4. 在VXE-Table的列配置中，设置sortable为true，开启列排序功能。

{ field: 'id', title: 'ID', sortable: true },
{ field: 'name', title: 'Name', sortable: true },
{ field: 'age', title: 'Age', sortable: true },

5. 在VXE-Table的列配置中，使用slot插槽，添加拖拽排序的图标。

{ field: 'id', title: 'ID', sortable: true },
{
  field: 'name',
  title: 'Name',
  sortable: true,
  slots: { header: 'drag-header' },
},
{ field: 'age', title: 'Age', sortable: true },

<template #drag-header="{ column }">
  <span class="drag-handle">☰</span>
  {{ column.title }}
</template>

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