vue2 elementui 表格列拖拽

Vue2与Element UI结合使用时，可以利用Element UI提供的表格组件E-table，并通过第三方库如Vuedraggable实现列拖拽功能。首先，你需要安装`vuedraggable`库，然后在你的Vue组件中做以下操作：

1. 引入依赖：

<template>
  <div>
    <el-table ref="table" :data="tableData">
      <!-- ... -->
    </el-table>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
</script>

2. 使用draggable修饰表头列：

<template>
  <el-table-column v-for="(column, index) in columns" :key="index" draggable>
    <!-- 列的内容 -->
  </el-table-column>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 数据数组
      columns: [
        { field: 'name', title: '姓名' },
        { field: 'age', title: '年龄' },
        // 其他列...
      ]
    }
  },
  mounted() {
    this.$refs.table.headerGroup.draggable = draggable({
      group: 'columns',
      // 可选配置项，例如动画、放置限制等
    })
  }
}
</script>

在这里，`group`属性用于指定哪些元素可以互相拖动，这里设为`columns`表示所有列都可以相互拖拽。