el-table列宽拖动事件如何触发 elementui

### Element UI 中 `el-table` 列宽拖动事件触发方法 为了实现 `el-table` 的列宽拖动功能，可以借助第三方库如 `el-table-draggable` 或者通过监听原生 DOM 事件来完成。以下是具体的方法： #### 方法一：使用 `el-table-draggable` 可以通过安装并配置 `el-table-draggable` 插件来轻松处理列宽调整的功能。 ```html <template> <div> <ElTableDraggable> <el-table row-key="id" @resize="handleResize" :data="list"> <!-- 表格内容 --> </el-table> </ElTableDraggable> </div> </template> <script> export default { methods: { handleResize(newWidth, oldWidth, column, event) { console.log('新的宽度:', newWidth); console.log('旧的宽度:', oldWidth); console.log('当前列的信息:', column); console.log('原始事件对象:', event); } }, } </script> ``` 此方式利用了 `@resize` 事件来捕获用户改变列宽的行为[^1]。 #### 方法二：直接操作DOM元素 如果不希望依赖额外的插件，则可以直接绑定到浏览器默认行为上。Element Plus 提供了一个名为 `header-cell-style` 的钩子函数用于自定义表头样式的同时也可以用来添加交互逻辑。 ```javascript methods:{ headerCellStyle({column}){ const thDom = document.querySelector(`.${column.id}`); let startX; function mouseDownHandler(e){ startX=e.clientX; document.onmousemove=(moveEvt)=>{ moveEvt.preventDefault(); const diffX=moveEvt.clientX-startX; thDom.style.width=`${parseInt(thDom.offsetWidth)+diffX}px`; startX=moveEvt.clientX; }; document.onmouseup=()=>{ document.onmousemove=null; document.onmouseup=null; // 发送更新后的尺寸数据给服务器或其他地方... }; } thDom.addEventListener('mousedown',mouseDownHandler); return {}; } } ``` 这种方法虽然更底层一些，但是灵活性更高，允许开发者完全控制整个过程[^4]。 #### 注意事项 - 当启用边框(border)选项时可能会遇到意外情况，比如在某些特定条件下点击表头区域可能导致排序而非预期中的列宽调整动作发生。针对此类现象可尝试禁用自动排序或将两者分开独立管理[^2]。 - 如果页面中有多个表格实例共存的话，记得为每个实例单独注册对应的回调处理器以免混淆。