vue sortablejs 拖拽表格后只表头换位数据没变

VueSortableJS是一个轻量级的JavaScript库，它允许你在Vue.js应用中实现列表的拖放功能，包括表格的列排序。当你使用SortableJS对表格的表头进行拖拽操作，改变的是视觉效果，即列的排列顺序，而原始数据不会自动更新，因为表头的交换并没有直接修改数组的数据结构。

在Vue中，如果你想要在拖动后实际改变数据，你需要手动处理这个逻辑。通常的做法是在`updated()`或者`mounted()`钩子中，监听排序后的顺序，然后根据新的顺序重新调整数据数组。这里的关键在于维护一个对应关系，比如一个映射数组或对象，记录原数组元素的新位置。

以下是一个简单的例子：

<template>
  <table>
    <thead>
      <tr v-for="(header, index) in headers" :key="index">
        <th draggable @drop="onDrop($event, index)">
          {{ header }}
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- ...渲染数据... -->
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['Name', 'Age', 'Email'], // 原始数据
      sortedHeaders: [], // 存储排序后的顺序
      // 可能需要的数据映射对象
      headerMap: {},
    };
  },
  methods: {
    onDrop(event, oldIndex) {
      this.headers.splice(oldIndex, 1); // 移除旧位置的元素
      const newIndex = event.target.dataset.index; // 获取新位置
      this.headers.splice(newIndex, 0, this.headers[oldIndex]); // 将元素移动到新位置
      this.headerMap = {} // 更新映射对象
      for (let i = 0; i < this.headers.length; i++) {
        this.headerMap[this.headers[i]] = i;
      }
      // 如果需要，同步数据源（假设有一个data属性）
      if (this.data) {
        this.updateData();
      }
    },
    updateData() {
      // 根据headerMap计算新数据的排序
      // 此处仅示例，你需要根据实际情况调整
      this.data = this.data.map((item) => ({
        [this.headers[this.headerMap[item.name]]]: item.age,
        // 其他字段...
      }));
    },
  },
};
</script>

记得在你的组件中根据实际需求添加`updateData()`方法，并确保数据源`this.data`也支持按索引访问和更新。