vxe-table 拖拽排序

vxe-table提供了拖拽排序的功能，可以通过拖拽表格行来改变它们的顺序。下面是一个演示如何使用vxe-table实现拖拽排序的例子：

<template>
  <div>
    <vxe-table
      ref="table"
      :data="tableData"
      :columns="columns"
      :sortable="true"
      @sort-change="handleSortChange"
    ></vxe-table>
  </div>
</template>

<script>
import 'vxe-table/lib/style.css';
import { VXETable } from 'vxe-table';

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Mike', age: 25 },
        { id: 3, name: 'Tom', age: 30 },
        { id: 4, name: 'Jerry', age: 35 },
      ],
      columns: [
        { field: 'id', title: 'ID', width: 80 },
        { field: 'name', title: 'Name', width: 120 },
        { field: 'age', title: 'Age', width: 80 },
      ],
    };
  },
  mounted() {
    VXETable.setup({
      table: {
        mouseConfig: {
          selected: true,
          checked: true,
          checkedByClickRow: true,
          checkedByCell: true,
        },
      },
    });
  },
  methods: {
    handleSortChange({ column, order }) {
      const { table } = this.$refs;
      table.sort(column.field, order);
    },
  },
};
</script>

在上面的例子中，我们使用了vxe-table的`sortable`属性来启用拖拽排序功能。当用户拖拽表格行时，`sort-change`事件会被触发，我们可以在事件处理函数中调用`table.sort`方法来实现排序。