Element UI Table 列拖拽功能实现教程 - 使用 vue-draggable-resizable 库

Element UI 的 Table 组件并不支持列拖拽功能。如果你想要实现列拖拽的功能，可以使用其他的第三方库，比如 vue-draggable-resizable。这个库可以让你轻松地为 Element UI 的 Table 组件添加列拖拽功能。

首先，你需要安装 vue-draggable-resizable 库。你可以使用 npm 或者 yarn 来安装它：

npm install vue-draggable-resizable

然后，在你的 Vue 组件中引入和注册该库：

import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  components: {
    VueDraggableResizable
  }
}

接下来，你需要在 Table 组件的每一列上添加一个 VueDraggableResizable 组件。你可以使用 scoped slot 来定义每一列的内容，然后在 VueDraggableResizable 组件中调用该 scoped slot。这样，你就可以在每一列上实现拖拽功能了。

<el-table :data="tableData">
  <el-table-column v-for="column in columns" :key="column.prop">
    <vue-draggable-resizable>
      <template slot-scope="{ resize }">
        <el-table-column label='{{ column.label }}' :prop="column.prop" :resizable="false" :width="column.width">
          <template slot-scope="{ row }">
            <!-- column content -->
          </template>
        </el-table-column>
        <div class="resize-handle" @mousedown.stop="resize.start"></div>
      </template>
    </vue-draggable-resizable>
  </el-table-column>
</el-table>

在上面的代码中，我们使用了 <vue-draggable-resizable> 组件来包裹每一列的内容。然后，在 <template slot-scope="{ resize }"> 中，我们定义了一个拖拽手柄 <div class="resize-handle">，并在 mousedown 事件中调用了 resize.start 方法来开始拖拽。

最后，你可以根据需要自定义拖拽手柄的样式，并在 resize.start 方法中添加一些拖拽的逻辑。

希望以上内容能帮到你！