el-popover不显示滚动条
时间: 2023-10-01 16:08:30 浏览: 56
el-popover不显示滚动条的问题可能是由于样式设置不正确导致的。根据引用\[2\]中的描述,el-popover中含有滚动事件,触发滚动事件的同时,底部页面也同时触发。为了解决这个问题,可以在el-popover中添加一个滚动容器,并设置其高度和overflow属性来显示滚动条。
首先,你可以在el-popover的内容中添加一个div作为滚动容器,并设置其高度和overflow属性,例如:
```html
<el-popover>
<div class="scroll-container" style="height: 200px; overflow: auto;">
<!-- 内容 -->
</div>
</el-popover>
```
然后,你可以在样式中为滚动容器添加样式,例如:
```css
.scroll-container {
/* 样式设置 */
}
```
这样,滚动容器就会显示滚动条了。如果你想要在el-popover关闭时恢复底部页面的滚动,可以在el-popover的@hide事件中调用恢复滚动的方法,例如:
```html
<el-popover @hide="this.canScroll()">
<!-- 内容 -->
</el-popover>
```
通过以上的设置,el-popover应该可以正确显示滚动条了。如果还有其他问题,请参考引用\[1\]和引用\[3\]中的解决方法。
#### 引用[.reference_title]
- *1* [【bug】el-popover样式问题引起页面双滚动条,单独页面设置body样式](https://blog.csdn.net/weixin_49668076/article/details/128575880)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue+ElementUI使用el-popover内滚动事件穿透解决](https://blog.csdn.net/qq_40836414/article/details/112697273)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [el-popover 初始弹出位置不准确,及el-popover超出屏幕问题](https://blog.csdn.net/weixin_37739550/article/details/125757697)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]