【Vue+ElementUI】Table表格实现自定义表头展示+表头拖拽排序

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    @header-dragend="onHeaderDragEnd"
  >
    <el-table-column
      v-for="item in dynamicColumns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      sortable
    >
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...数据项
      ],
      dynamicColumns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        // ...更多列
      ]
    }
  },
  methods: {
    onHeaderDragend(newDragColumn, oldDragColumn, dropColumn, dropType) {
      // 在这里实现表头拖拽排序逻辑
      // 例如：更新dynamicColumns数组的顺序
    }
  }
}
</script>

这个代码实例展示了如何在Vue中使用ElementUI的Table组件来实现一个自定义表头的表格，并且可以通过拖拽表头来进行排序。onHeaderDragend方法是用户在拖动表头时触发的事件处理函数，在这个函数中，你可以编写自己的逻辑来更新列的顺序。