elementui改table表头拖动

Element UI 的 `el-table` 组件本身并没有直接提供表头列宽拖动调整的功能，但我们可以通过一些自定义的方式来实现这个功能。 以下是具体的实现思路： ### 实现步骤 1. **监听鼠标事件** 我们需要通过原生 DOM 操作，在每个表头单元格上绑定鼠标的按下 (`mousedown`)、移动 (`mousemove`) 和释放 (`mouseup`) 事件。 2. **计算宽度变化** 当用户按下并拖动某个表头时，记录初始位置，并随着鼠标的移动动态更新对应列的宽度。 3. **设置样式** 根据用户的操作实时修改 `el-table-column` 的宽度属性（width），这将影响表格的实际显示效果。 4. **保存状态**（可选） 如果希望页面刷新后保留之前的列宽调整结果，则可以将各列宽度存储到本地缓存中 (如 localStorage)，并在初始化组件时加载这些值。 --- ### 示例代码 ```vue <template> <div class="resizable-table"> <el-table :data="tableData" border style="width: 100%"> <!-- 动态生成列 --> <el-table-column v-for="(column, index) in columns" :key="index" :label="column.label" :prop="column.prop" :width="column.width"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 25 }, { name: '李四', age: 30 } ], // 列配置信息 columns: [ { label: "姓名", prop: "name", width: 200 }, { label: "年龄", prop: "age", width: 100 } ] }; }, mounted() { this.initColumnResize(); }, methods: { initColumnResize() { const headers = document.querySelectorAll('.el-table .has-gutter th'); Array.from(headers).forEach((th, index) => { if (!this.columns[index]) return; // 确保有对应的列数据 let startOffset; th.style.position = 'relative'; const resizer = document.createElement('div'); resizer.className = 'resize-handle'; // 自定义大小调节手柄 resizer.style.cssText = ` position:absolute; right:0; top:0; bottom:0; width:8px; cursor:east-resize; user-select:none; `; th.appendChild(resizer); let isResizing = false; resizer.addEventListener("mousedown", e => { isResizing = true; startOffset = e.pageX; }); window.addEventListener("mousemove", e => { if(!isResizing) return; const newWidth = Math.max(60, parseInt(this.columns[index].width || 0) + (e.pageX - startOffset)); this.$set(this.columns[index], 'width', newWidth); // 更新宽度 }); window.addEventListener("mouseup", () => { isResizing = false; }); }); } } }; </script> <style scoped> .resize-handle:hover{ background-color:#ddd; } </style> ``` --- ### 注意事项 1. 上述方案适用于静态列的情况；如果列是由后台动态渲染而来的复杂场景，需进一步适配。 2. 考虑性能问题：尽量减少不必要的全局范围内的 mousemove 监听器绑定。 3. 兼容性测试非常重要——尤其是针对低版本浏览器的支持情况。 ---