vuedraggable elementui table表头可以拖动交换位置

VueDraggable是一个基于Vue.js的Drag-and-Drop组件，可以实现拖拽和排序操作。ElementUI是一个基于Vue.js的UI组件库，提供了许多常用的UI组件，包括表格组件。

在使用ElementUI的表格组件时，我们可以使用VueDraggable来实现表头可以拖动交换位置的效果。具体实现过程如下：

1. 安装VueDraggable组件库

在项目中安装VueDraggable组件库，可以使用npm install vuedraggable --save 命令进行安装。

2. 在表格组件中使用VueDraggable

在表格组件中引入VueDraggable组件，并将表头数据作为props传入。在table-header的slot中，使用VueDraggable组件将表头数据进行渲染并设置为可拖动的。

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column v-for="column in tableHeader"
                       :key="column.prop"
                       :prop="column.prop"
                       :label="column.label"
                       :sortable="true"
                       :resizable="true"
      ></el-table-column>
      <template slot="header">
        <draggable v-model="tableHeader"
                   @end="onDragEnd"
                   :options="{group:'tableHeader',handle:'.drag-handle'}"
        >
          <el-table-column v-for="(column, index) in tableHeader"
                           :key="column.prop"
                           :prop="column.prop"
                           :label="column.label"
                           :width="column.width"
                           :resizable="true"
                           :sortable="true"
                           :class="['drag-handle',{'dragged':dragIndex === index}]">
            <span slot-scope="{column}">{{column.label}}</span>
          </el-table-column>
        </draggable>
      </template>
    </el-table>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  data () {
    return {
      tableHeader: [
        {
          prop: 'id',
          label: 'ID',
          width: 120
        },
        {
          prop: 'name',
          label: 'Name',
          width: 120
        },
        {
          prop: 'age',
          label: 'Age',
          width: 120
        }
      ],
      tableData: []
    }
  },
  components: {
    draggable
  },
  methods: {
    onDragEnd(evt) {
      this.dragIndex = -1; //重置被拖拽的元素的下标
    }
  }
}
</script>

以上就是实现表格表头可拖动交换位置的方法，通过将头部数据作为props传入VueDraggable组件，然后在表格头部的slot中使用VueDraggable组件进行渲染即可。同时，我们还可以设置拖动的group，以及拖动的handle等相关属性。在本例中，我们还设置了拖动结束后触发的事件，重置被拖拽元素的下标。

总的来说，VueDraggable与ElementUI的结合可以方便快捷地实现表头可拖动交换的功能，减轻开发者的工作量，提高系统的用户体验。