popper-append-to-body设置为true时,el-select下拉列表不会随滚动条滚动
时间: 2023-07-24 09:34:26 浏览: 105
详解如何修改el-select的样式:popper-append-to-body和popper-class
当 `popper-append-to-body` 设置为 `true` 时,下拉列表会被插入到 `body` 中,而不再是 `el-select` 的父元素中,因此出现了滚动条不跟随的问题。你可以通过给 `body` 元素添加样式来解决这个问题,例如:
```css
body {
overflow: auto;
position: relative;
}
```
这样就可以让 `body` 元素出现滚动条,并且设置了 `position: relative`,可以避免影响其他元素的布局。
如果你不希望给整个 `body` 添加样式,也可以通过给 `el-select` 组件设置一个父元素,并设置该元素的样式,例如:
```html
<div class="select-container">
<el-select popper-append-to-body>
<!-- options -->
</el-select>
</div>
```
```css
.select-container {
height: 200px;
overflow: auto;
position: relative;
}
```
这样,你就可以在 `select-container` 元素中出现滚动条,并且下拉列表也会跟随滚动条滚动了。
阅读全文