Vue.js - 修改ElementUI的select选择器组件高度的方法
作者:hangge | 2025-01-22 08:38
1,使用内置的尺寸样式
(1)我们知道,el-select 组件可通过 size 属性指定输入框的尺寸,除了默认的大小外,还提供了 medium、small 和 mini 三种尺寸。
<el-select size="medium"> <el-option label="1秒" value="1000"></el-option> <el-option label="2秒" value="2000"></el-option> <el-option label="3秒" value="3000"></el-option> </el-select>
(2)各尺寸的对比如下:

2,通过覆盖样式调整高度
(1)如果需要对高度进行精确的设置,就需要使用深度选择器覆盖 Element UI 的默认样式。具体方法同之前修改 input 组件的高度类似,不过特别要注意右侧的箭头图标也要设置居中样式,否则会出现偏移现象。具体代码如下:
<template> <div> <el-select class="my-select"> <el-option label="1秒" value="1000"></el-option> <el-option label="2秒" value="2000"></el-option> <el-option label="3秒" value="3000"></el-option> </el-select> </div> </template> <style scoped> /* selecte 框的高度设置*/ /deep/ .my-select .el-input__inner { height: 20px; } /* 设置右侧箭头按钮位置 */ /deep/ .my-select .el-input__suffix { top: calc(50% - 8px); } /deep/ .my-select .el-input__icon { line-height: inherit; } /deep/ .my-select .el-input__suffix-inner { display: inline-block; } </style>
(2)运行效果如下:

全部评论(0)