vue中el-select下拉框文字过长时,导致dropdown溢出问题,加入横向滑动条
时间: 2024-02-06 14:44:52 浏览: 118
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
可以通过给 `el-select` 的父容器添加 `overflow-x: auto` 样式来实现横向滚动条。具体可以按照以下步骤进行:
1. 给 `el-select` 的父容器添加一个类名,比如 `select-wrapper`。
2. 在 CSS 中为该类名添加 `overflow-x: auto` 样式,这样当 `el-select` 的内容过长时,就会出现横向滚动条。
例如,HTML 代码如下:
```html
<div class="select-wrapper">
<el-select>
<el-option label="Option 1" value="option1"></el-option>
<el-option label="Option 2" value="option2"></el-option>
<!-- 更多选项... -->
</el-select>
</div>
```
CSS 代码如下:
```css
.select-wrapper {
overflow-x: auto;
}
```
这样就可以解决 `el-select` 下拉框文字过长导致的 `dropdown` 溢出问题,并且添加了横向滚动条。
阅读全文