【element】el-select多选撑开原输入框高度并换行

需要达到的效果：

 但是直接使用element官方上的效果：

 面向百度编程发现其他up的做法在我的项目中并不能奏效，只能走点野生路子= = 

先贴官方代码

<el-select
    v-model="value2"
    multiple
    collapse-tags
    style="margin-left: 20px;"
    placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

当选项过长并且输入框宽度过小时就会出现换行，分析需要解决的问题：

1.找到布局平衡的宽度数值（因为本人项目里原已统一各种输入框的宽度，所以需要找到一个不破坏布局的宽度数值平衡点）

2.处理输入框里面的el-tag换行问题

3.箭头符号不被遮挡

解决步骤：

1.在el-select标签加上class="selects"

<el-select
    v-model="value2"
    multiple
    collapse-tags
    style="margin-left: 20px;"
    placeholder="请选择"
    class="selects"
>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

2.selects这个类的内容

实际穿透修改的类名可能与下面不一致，实际情况实际分析，做到下面三点即可：

（1）输入框里做到多选不换行即可

（2）限制输入框的宽高（没有这个需求可以不写）

（3）拉长宽高后会发现箭头符号会被el-tag遮挡，位置需要调整

    .selects {
      .el-input.el-input--medium.el-input--suffix { // 调整箭头符号块的宽度
        width: 175px !important;
      }
      .el-input.el-input--medium.el-input--suffix {
        .el-input__inner {                          // 调整输入框的宽高
          height: 36px !important;
          width: 220px !important;
        }
        .el-input__suffix-inner {                   // 调整箭头符号的位置
          position: absolute;
          right: -45px;
        }
      }
      .el-select__tags {                            // 调整输入框里面的多选不换行
        flex-wrap: nowrap !important;
      }
    }