elementUI table 表头拖拽调整顺序

Element UI的Table组件并没有直接提供表头拖拽功能，但你可以使用第三方库如vuedraggable来实现表头拖拽功能。

首先，确保你已经安装了vuedraggable：

npm install vuedraggable

然后，你可以在你的组件中使用它来实现表头拖拽功能：

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <draggable v-model="columns" @end="onDragEnd">
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label">
      </el-table-column>
    </draggable>
  </el-table>
</template>
 
<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable
  },
  data() {
    return {
      tableData: [
        // ...
      ],
      columns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' }
        // ...
      ]
    };
  },
  methods: {
    onDragEnd(event) {
      // 拖拽结束后，更新columns的顺序
      this.columns = this.columns.sort((a, b) => {
        return event.newIndex - event.oldIndex;
      });
    }
  }
};
</script>

在这个例子中，draggable是vuedraggable的一个组件，它允许你拖拽表头来重新排列列。v-model用于绑定表头数组columns，@end事件在拖拽结束时触发，并更新columns的顺序。

确保你已经在<script>标签中导入了draggable组件，并在components选项中注册。

这样，你就可以通过拖拽表头来调整表格列的顺序了。