vxe-table 列拖动排序

vxe-table 是一个基于 Vue.js 的表格组件库，它提供了丰富的表格功能，包括列拖动排序。

要实现列拖动排序，你需要使用 vxe-table 的 sortable 属性。sortable 可以接受一个对象或者一个数组作为值。对象中可以指定哪些列是可以排序的，哪些是不可以排序的，以及默认的排序方式。数组中可以按照顺序指定哪些列是可以排序的。

下面是一个示例：

<template>
  <vxe-table :data="tableData" :columns="columns" :sortable="sortable"></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, gender: 'Male' },
        { name: 'Jane', age: 30, gender: 'Female' },
        { name: 'Bob', age: 20, gender: 'Male' },
        { name: 'Alice', age: 35, gender: 'Female' }
      ],
      columns: [
        { field: 'name', title: 'Name', sortable: true },
        { field: 'age', title: 'Age', sortable: true },
        { field: 'gender', title: 'Gender', sortable: false }
      ],
      sortable: { defaultSort: { field: 'age', order: 'desc' } }
    }
  }
}
</script>

在这个示例中，我们将 sortable 设置为一个对象，其中 defaultSort 指定了默认的排序方式为按照 age 降序排序。同时，name 和 age 列都可以进行排序，而 gender 列不可以进行排序。

当用户拖动列头时，vxe-table 会自动调整列的顺序，并且重新排序表格数据。你可以在控制台输出 tableData，查看排序后的结果。