elementPlus 表格实现列拖拽表头动了下面内容没变

要实现表格列的拖拽，可以使用 elementPlus 提供的 el-table-column 组件的 sortable 属性。将 sortable 设置为 custom，然后使用 order-change 事件来监听排序的变化。

以下是一个示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in tableColumns"
      :key="column.prop"
      :label="column.label"
      :sortable="column.sortable ? 'custom' : false"
      @order-change="handleOrderChange"
    >
      {{ column.prop }}
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20, city: 'New York' },
        { name: 'Jane', age: 25, city: 'Los Angeles' },
        { name: 'Tom', age: 30, city: 'Chicago' },
      ],
      tableColumns: [
        { label: 'Name', prop: 'name', sortable: true },
        { label: 'Age', prop: 'age', sortable: true },
        { label: 'City', prop: 'city', sortable: true },
      ],
    };
  },
  methods: {
    handleOrderChange({ column, prop, order }) {
      // 根据排序的属性和顺序对 tableData 进行排序
      this.tableData.sort((a, b) => {
        const valueA = a[prop];
        const valueB = b[prop];
        if (order === 'ascending') {
          return valueA > valueB ? 1 : -1;
        } else {
          return valueA < valueB ? 1 : -1;
        }
      });
    },
  },
};
</script>

在上述代码中，tableData 是表格的数据，tableColumns 是表格的列配置。每个列的 sortable 属性设置为 true，表示该列可排序。在 handleOrderChange 方法中，根据排序的属性和顺序对 tableData 进行排序，从而实现列的拖拽排序效果