element ui - el-select 手动设置高度

---

场景

当我们的页面想要手动设置 element ui 中 el-select 的高度时，如果只是通过设置 el-select 的 height 属性时，会发现调整无效。

继续对 el-select 中的 input 元素 .el-input__inner 设置。会发现高度生效了，但是右侧的下拉框箭头移位了。

---

代码

如下提供一种可以调整 el-select 高度的方法：

.el-select {
    
    
  width: 184px;
  height: 32px;
  .el-input__inner {
    
    
    height: 32px;
  }

  .el-input__prefix, .el-input__suffix {
    
    
    height: 32px;
  }

  /* 下面设置右侧按钮居中 */
  .el-input__suffix {
    
    
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
  }
  /* 输入框加上上下边是 32px + 2px =34px */
  .el-input__icon {
    
    
    line-height: 34px;
  }
}