el-table实现表头拖拽效果

el-table是Element UI框架中的一个表格组件，支持表头固定、排序、筛选等功能。在el-table中实现表头拖拽效果，可以让用户根据自己的需求自由调整表格的列宽，提升使用体验。

实现步骤如下：

1. 在el-table标签上添加属性“border”，设置表格边框为1px。
2. 在el-table-column标签上添加属性“resizable”，启用列宽调整功能。
3. 在el-table-column标签上添加属性“width”，设置列宽的初始值。
4. 在el-table标签上添加属性“@header-dragend”，绑定一个方法，用于在拖拽结束时更新列宽。

具体代码如下：

<el-table :data="tableData" border @header-dragend="handleHeaderDragEnd">
  <el-table-column prop="name" label="姓名" resizable :width="100"></el-table-column>
  <el-table-column prop="age" label="年龄" resizable :width="100"></el-table-column>
  <el-table-column prop="address" label="地址" resizable :width="200"></el-table-column>
</el-table>

methods: {
  handleHeaderDragEnd(newWidth, oldWidth, column, event) {
    column.width = newWidth;
  }
}

在上述代码中，handleHeaderDragEnd方法会在拖拽结束时被调用，它会接收四个参数，分别是新的列宽、旧的列宽、被拖拽的列对象和拖拽事件对象。在该方法中，我们可以通过修改被拖拽的列对象的width属性来更新列宽。