element el-table 拖拽列来重新排序

在Element UI库中的el-table组件中，拖拽列头功能允许用户通过直接拖动列标题来改变表格数据的展示顺序。这是通过内置的数据管理特性以及JavaScript的拖放API实现的。具体步骤如下：

1. 首先，你需要在`el-table-column`中添加`draggable`属性，并设置为`true`，表示该列可以被拖动。

<el-table-column type="index" label="序号" width="50" :draggable="true"></el-table-column>

2. Element UI会在列头上默认显示一个小图标，当鼠标悬停时变为可拖动状态。用户可以通过点击并拖动这个图标来移动列。

3. 当列被成功拖放到新的位置时，`sort-change`事件会被触发，你可以在这个事件处理器中处理列的新排序顺序，更新数据源或者控制状态。

<el-table :data="tableData" @sort-change="handleSortChange">
...
</el-table>

methods: {
  handleSortChange(column) {
    // 根据column.order计算新表头的排列顺序
    this.tableData.sort((a, b) => a[column.prop] - b[column.prop]);
  }
}