自定义el-select下拉框宽高
时间: 2023-07-20 09:27:31 浏览: 216
自制漂亮的select下拉框
要自定义 `el-select` 下拉框的宽高,可以通过以下两种方式之一:
1. 使用 CSS 样式来修改宽高
可以在全局 CSS 文件中添加以下样式代码:
```css
.el-select-dropdown .el-scrollbar {
height: 200px; /* 修改为需要的下拉框高度 */
}
.el-select-dropdown .el-select-dropdown__wrap {
max-height: 200px; /* 修改为需要的下拉框高度 */
width: 300px; /* 修改为需要的下拉框宽度 */
}
```
其中,`.el-select-dropdown .el-scrollbar` 和 `.el-select-dropdown .el-select-dropdown__wrap` 是下拉框的 CSS 类名,你可以根据需求修改样式。
2. 通过 `popper-class` 属性来设置宽高
在 `el-select` 组件中添加 `popper-class` 属性来设置宽高,例如:
```html
<el-select v-model="value" placeholder="请选择" popper-class="my-select">
<el-option label="选项一" value="1"></el-option>
<el-option label="选项二" value="2"></el-option>
</el-select>
```
在 CSS 文件中添加以下样式代码:
```css
.my-select .el-scrollbar {
height: 200px; /* 修改为需要的下拉框高度 */
}
.my-select .el-select-dropdown__wrap {
max-height: 200px; /* 修改为需要的下拉框高度 */
width: 300px; /* 修改为需要的下拉框宽度 */
}
```
其中,`popper-class` 属性指定了自定义的 CSS 类名 `my-select`,你可以在 CSS 文件中添加相应的样式来设置下拉框的宽高。
阅读全文