el-popover添加滚动条

要在 `el-popover` 中添加滚动条，你可以使用 CSS 的 `overflow` 属性。以下是一种实现方法：

1. 在 `el-popover` 的内容部分（通常是一个 `div` 元素）上添加样式类，例如 `scrollable-content`。
2. 在你的 CSS 样式文件中，添加如下样式：

.scrollable-content {
  max-height: 200px;  /* 设置最大高度，根据你的需要进行调整 */
  overflow-y: auto;  /* 添加垂直滚动条 */
}

请确保将 `max-height` 替换为你想要的具体高度。这个设置会限制内容的最大高度，并在内容超出最大高度时显示垂直滚动条。

记得引入 CSS 文件并将样式类应用到 `el-popover` 的内容部分。这样，当内容超出最大高度时，会自动显示滚动条。

相关问题

el-popover 滚动条跟随滚动

el-popover 是 Element UI 提供的一个弹出框组件，可以用于实现一些提示、说明等功能。如果希望 el-popover 的内容随着页面滚动而跟随滚动，可以使用以下方法：

1. 使用插槽（slot）的方式自定义 el-popover 的内容，将需要跟随滚动的部分放在一个容器内；
2. 在 el-popover 中添加一个监听滚动事件的钩子函数，并在钩子函数中更新需要跟随滚动的部分的位置，使其保持与 el-popover 组件的位置对齐。

以下是一个示例代码：

<el-popover ref="popover" placement="top">
  <div slot="content" ref="contentWrapper" @scroll="handleScroll">
    <!-- 需要跟随滚动的部分 -->
  </div>
</el-popover>

<script>
export default {
  methods: {
    handleScroll() {
      const popoverEl = this.$refs.popover.$el;
      const contentWrapperEl = this.$refs.contentWrapper;
      contentWrapperEl.style.top = `${popoverEl.offsetTop}px`;
      contentWrapperEl.style.left = `${popoverEl.offsetLeft}px`;
    }
  }
}
</script>

在 handleScroll 钩子函数中，首先获取 el-popover 组件和需要跟随滚动的部分的元素，并更新需要跟随滚动的部分的位置，使其保持与 el-popover 组件的位置对齐。这样就可以实现 el-popover 滚动条跟随滚动的效果。

el-popover不显示滚动条

el-popover不显示滚动条的问题可能是由于样式设置不正确导致的。根据引用\[2\]中的描述，el-popover中含有滚动事件，触发滚动事件的同时，底部页面也同时触发。为了解决这个问题，可以在el-popover中添加一个滚动容器，并设置其高度和overflow属性来显示滚动条。

首先，你可以在el-popover的内容中添加一个div作为滚动容器，并设置其高度和overflow属性，例如：

<el-popover>
  <div class="scroll-container" style="height: 200px; overflow: auto;">
    <!-- 内容 -->
  </div>
</el-popover>

然后，你可以在样式中为滚动容器添加样式，例如：

.scroll-container {
  /* 样式设置 */
}

这样，滚动容器就会显示滚动条了。如果你想要在el-popover关闭时恢复底部页面的滚动，可以在el-popover的@hide事件中调用恢复滚动的方法，例如：

<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 ]