sortablejs a-table拖拽表格后只表头换位了

SortableJS是一个强大的JavaScript库，用于实现拖放功能，特别适用于创建可排序的列表或表格。当您结合SortableJS和Ant Design Vue (a-table)中的表格组件使用时，遇到表头拖动后只改变位置而不影响数据的问题，这通常是因为SortableJS负责对DOM元素进行排序，而a-table的数据绑定和更新是由其内部逻辑控制的。

在a-table中，列的排序通常是基于虚拟滚动和后台API交互的。当你直接通过前端插件如SortableJS调整表头顺序时，它只是改变了DOM的视觉呈现，实际的数据结构并未实时同步。要解决这个问题，你需要做两件事：

1. **禁止a-table的默认排序**: 首先，在a-table的配置里，设置`sortable`属性为`false`，防止表头被自动排序。

<a-table :columns="columns" :data-source="tableData" :sortable="false"></a-table>

2. **手动处理数据排序**: 当用户完成拖拽后，需要在SortableJS回调中操作原始数据源，然后手动更新`tableData`，这样才能确保数据和视图的一致性。

Sortable.create(sortableEl, {
  onEnd: function({ newIndex, oldIndex }) {
    const sortedData = yourTableData.slice(); // 拷贝一份当前数据
    [sortedData[newIndex], sortedData[oldIndex]] = [sortedData[oldIndex], sortedData[newIndex]]; // 调整数据顺序
    yourTableData.splice(newIndex, 0, yourTableData.splice(oldIndex, 1)[0]); // 更新数据
  }
});

记得每次排序后更新视图（例如通过Vue的`$set`或`this.$forceUpdate()`），以便a-table刷新显示。