el-table拖拽调整列

### 实现Element UI `el-table` 组件中拖拽调整列 为了使 Element UI 的 `el-table` 支持列顺序的拖拽调整，通常会借助第三方库如 `sortablejs` 来扩展原生功能[^4]。下面是一个简单的实现方案： #### 安装依赖包 首先安装必要的 npm 包来支持此特性。 ```bash npm install vuedraggable sortablejs --save ``` #### 导入并注册组件 接着，在项目的入口文件或所需页面导入 draggable 和 SortableJS 插件，并将其应用到 Vue 应用程序实例上。 ```javascript import Vue from 'vue'; import { Table, TableColumn } from 'element-ui'; import Vuedraggable from 'vuedraggable'; Vue.use(Table); Vue.use(TableColumn); Vue.component('draggable', Vuedraggable); // 初始化新的 Vue 实例... new Vue({ ... }); ``` #### 创建可拖拽调整列宽的表格模板 构建 HTML 结构时，通过设置特定属性让每一列表头成为可移动对象。 ```html <template> <div class="table-container"> <!-- 使用 draggable 包裹 table-column --> <el-table :data="tableData" style="width: 100%"> <draggable tag="thead" @end="onDragEnd" handle=".drag-handle"> <tr> <th v-for="(column, index) in columns" :key="index"> {{ column.label }} <!-- 添加一个图标作为手柄用于触发拖拽操作 --> <i class="el-icon-rank drag-handle"></i> </th> </tr> </draggable> <tbody> <tr v-for="(row, rowIndex) in tableData" :key="rowIndex"> <td v-for="(col, colIndex) in columns" :key="`${rowIndex}-${colIndex}`">{{ row[col.prop] }}</td> </tr> </tbody> </el-table> </div> </template> ``` #### 处理拖拽事件逻辑 最后一步是在 JavaScript 方法里处理当用户完成拖拽后的响应动作，更新视图状态以反映最新的排列情况。 ```javascript export default { data() { return { columns: [ { label: "日期", prop: "date" }, { label: "姓名", prop: "name" }, { label: "地址", prop: "address" } ], tableData: [ // 假设的数据集 ] }; }, methods: { onDragEnd(event) { const oldIndex = event.oldIndex; const newIndex = event.newIndex; this.columns.splice(newIndex, 0, ...this.columns.splice(oldIndex, 1)); } } }; ``` 上述代码展示了如何利用 `vuedraggable` 及其内置方法监听拖拽结束事件 (`@end`) 并据此修改内部数据结构从而达到动态改变显示效果的目的[^3]。