【vue+element-plus】拖动表格头排序功能

在Vue项目中使用Element Plus库实现表格头拖动排序功能，可以借助Element Plus提供的Table组件和它的可拖动列头（Draggable Column）功能。以下是实现该功能的基本步骤和代码示例：

1. 引入Element Plus的Table组件及其依赖的样式文件。
2. 在你的Vue组件中定义表格的列（columns）和数据（data）。
3. 在表格的属性中使用`draggable`属性来启用列头拖动功能。
4. 使用`default-sort`属性指定默认的排序列和排序方式。

示例代码如下：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    border
    @sort-change="handleSortChange"
    default-sort="{ prop: 'date', order: 'descending' }">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :width="column.width">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // ... 你的表格数据
      ],
      columns: [
        { prop: 'date', label: '日期', width: 180 },
        { prop: 'name', label: '姓名', width: 180 },
        { prop: 'address', label: '地址' }
        // ... 其他列
      ]
    };
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      // 处理排序变化的逻辑
    }
  }
};
</script>

在上面的代码中，`el-table` 组件的 `draggable` 属性默认为 `true`，因此不需要显式设置。当用户拖动列头时，`handleSortChange` 方法会被触发，你可以在这里处理排序逻辑，例如根据用户的操作来更新 `tableData`。