Element Select 选择器自定义样式在多选时出现样式错乱解决

问题描述

在使用el-select组件时，需求提出的要求：
1、select可以随便设置高度（不受size属性制约）；
2、允许select多选显示tag并使高度自适应；

开发

设置select高度样式，注意，这里使用的是scss修改样式：

<div class="elSelectBox">
    <el-select
      ref="selectBox"
      v-model="val"
      multiple
      value-key="id"
      clearable
      placeholder="请选择"
    >
      <!-- 遍历实现多选 -->
      <el-option
        v-for="(item, index) in valMult"
        :key="index"
        :value="item"
        :label="item.label"
      />
    </el-select>
  </div>

.elSelectBox {
  height: 34px;
  ::v-deep .el-select {
    height: 100%;
    line-height: inherit;
    .el-input {
      height: 100%;
      .el-input__inner {
        height: 100% !important;
      }
      .el-input__icon {
        line-height: inherit;
      }
    }
  }
}

高度样式修改成功，如下图显示：

但是选择多选时，出现了下图这种情况：

从网上找了一下解决方法，是给select组件增加collapse-tags属性强制只显示一个tag标签，来保证样式的正常，如下图所示：

但是注意！！我们的需求要求高度是可以自适应的，要显示所有的tag！！那就不能用这种方式去处理。我试了好多种样式上的修改，都没有好的显示效果，最后，想到了下面的解决方案。

解决方法

mounted() {
  this.$refs.selectBox.initialInputHeight = 34;
},

成功了，但是样式上还是有点偏差，右边这个小icon没有上下居中，如下图所示：

继续修改样式，如下：

<style lang="scss" scoped>
.elSelectBox {
  ::v-deep .el-select {
    .el-input__icon {
      position: relative;
      top: -2px;
      line-height: 0;
    }
  }
}

成功，如下图：

测试其他高度的样式是否正常，正常！！！

啊啊啊啊啊啊啊啊啊啊啊！！！为什么一个周末回来，initialInputHeight就不好使了，而且一会好使一会不好使，在网上搜索这个属性，暂时没有搜到有用的信息。
又增加了一行代码，希望双管齐下把样式给我控制住啊啊啊啊啊啊啊啊啊啊啊！！！

mounted() {
  this.$refs.selectBox.initialInputHeight = 34;
  this.$refs.selectBox.$el.querySelector('.el-input__inner').style.height = '30px';
},