Element-ui滚动时，如何解决el-option内容溢出的问题？

本文共计1125个文字，预计阅读时间需要5分钟。

复现场景，观察现象，分析原因，为简单起见，将选项区域描述为popperEl的z-index，比较大小，会覆盖在其他元素上。popperEl默认是插入body元素的（可以将popper-append-to-body设置为false后不插入到body上）。

复现场景, 看图

分析原因

为简单起见, 把选项区域描述为popperEl

• popperEl的z-index 比较大, 会覆盖在其他元素上面
• popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body)
• popperEl是在mouseup事件里去做隐藏逻辑的, 而按下鼠标, 移动滚动条的时候, 并没有触发mouseup事件.
• popperEl并没有监听滚动事件(没法监听, 也没必要监听)

解决方案

方案一

我最初想到的解决方案是通过css解决，通过popper-class属性给Select下拉框添加类名,然后用css来做, 试了一下这个方案并不可行(只能在某些特定的场景下起作用),遂放弃,可能最优雅最高性能的方法就是用css来搞定, 有踩过这个坑的朋友请指点一下

方案二

通过监听$root的scroll事件,利用事件冒泡,只需要在根元素上添加scroll事件的监听就可以了, 测试一番之后, 发现scroll事件根本不支持冒泡, event.bubbles为false)。