vxe-table 行拖拽顺序后 怎么修改tableData的顺序

vxe-table 是一款基于 Vue.js 的高性能表格组件库，它提供了一套完整的行拖拽功能来动态管理数据的排序。当用户通过拖拽调整了表头列的顺序时，你通常需要监听表头列的`sort-change`事件，这个事件会触发并携带新的排序信息。

以下是一个简单的步骤说明：

1. 首先，在你的组件中安装并引入 vxe-table 组件，并绑定到数据 `tableData` 和必要的列配置。

<template>
  <vxe-table :data="tableData" @sort-change="handleSortChange">
    <!-- ... -->
  </vxe-table>
</template>

<script>
import { ref } from 'vue';
import VxeTable from "vxe-table";

export default {
  components: {
    VxeTable
  },
  data() {
    return {
      tableData: [...] // 初始化的数据数组
    };
  },
  methods: {
    handleSortChange({ field, order }) {
      // 更新tableData的顺序
      this.tableData.sort((a, b) => {
        if (order === 'asc') {
          return a[field] > b[field] ? 1 : -1;
        } else if (order === 'desc') {
          return a[field] < b[field] ? 1 : -1;
        }
        return 0; // 如果无法比较默认升序
      });
    }
  }
}
</script>

在这个例子中，`handleSortChange`方法接收两个参数：字段名 (`field`) 和排序方向 (`order`)。根据这两个值，你可以更新 `tableData` 中的元素顺序。