el-table表滚动条无法选中左右滑动

### 解决 Element UI `el-table` 表格滚动条左右滑动无法选中的问题 对于Element UI的`el-table`组件，在处理表格内部内容时，可能会遇到滚动条左右滑动影响单元格选中的情况。这通常是因为浏览器默认行为会将鼠标滚轮事件优先用于页面整体滚动而非特定区域内的交互。 为了确保在水平滚动时不干扰用户的点击或拖拽操作，可以采取以下几种优化措施： #### 方法一：调整CSS样式防止冒泡 通过自定义`.el-table__body-wrapper`类下的伪元素样式，阻止其捕获鼠标的移动事件，从而不影响到实际的数据行的选择功能[^2]。 ```css .el-table__body-wrapper { /* 防止触发父级容器的滚动 */ pointer-events: none; } /* 仅允许子节点响应指针事件 */ .el-table__row { pointer-events: auto; } ``` #### 方法二：利用JavaScript控制焦点状态 如果上述纯前端解决方案未能完全解决问题，则可以在Vue实例内编写逻辑代码来管理输入设备的状态变化。例如监听窗口级别的mousedown和mouseup事件，并在此期间临时禁用表体外层包裹器(`.el-table__body-wrapper`)上的任何可能引起冲突的行为[^5]。 ```javascript // 组件挂载完成后执行 mounted() { window.addEventListener('mousedown', this.handleMouseDown); window.addEventListener('mouseup', this.handleMouseUp); }, methods:{ handleMouseDown(event){ const tableBodyWrapper = document.querySelector('.el-table__body-wrapper'); if (!event.target.closest('.el-table')) { // 如果点击发生在表格外部则不作处理 return; } // 记录当前是否有按住左键按下动作发生 this.isLeftButtonDown = true; // 设置标志位以指示是否应该忽略接下来的一次mousemove事件 setTimeout(() => {this.ignoreNextMouseMove=false},0); // 禁用其他不必要的滚动机制直到松开按钮为止 tableBodyWrapper.style.userSelect='none'; tableBodyWrapper.style.pointerEvents='none'; }, handleMouseUp(){ this.isLeftButtonDown = false; const tableBodyWrapper = document.querySelector('.el-table__body-wrapper'); // 恢复正常的用户选择与交互能力 tableBodyWrapper.style.removeProperty('user-select'); tableBodyWrapper.style.removeProperty('pointer-events'); // 清除计时器变量以防内存泄漏 clearTimeout(this.mouseDownTimerId); } } ``` 以上两种方式都可以有效改善用户体验，使得即使存在较大的数据集导致需要水平滚动查看全部字段的情况下，仍然能够顺利地完成多行记录的选择操作。