element-ui中select选择框设置多选时输入框显示的调整

因为需求的原因，需要使用element的下拉框的多选功能，但是当单个选项字数过多的时候，会出现这种挤压输入框的情况，在这一点上，在UI的显示上非常的不美观。（如图所示）

笔者也是个前端菜鸡，只能想到如下的方法处理，还希望能抛砖引玉，得到更多大神的指点。

在对下拉框设置不同的类名，对多选框绑定的值进行判断，一个值和多个值的时候设置不同的类名。 <span :class="listQuery.itemCode.length === 1 ? 'single-item' : 'plural-item'"

      治疗项目：
      <el-select
        v-model="listQuery.itemCode"
        size="mini"
        filterable
        clearable
        placeholder="请选择"
        multiple
        collapse-tags
        style="width:150px"
      >
        <el-option
          v-for="item in treatList"
          :key="item.itemsFuncCode"
          :label="item.itemsName"
          :value="item.itemsFuncCode"
        />
      </el-select>
</span>

然后再对不同的类型进行CSS上的设置（single-item是单个选项的 plural-item是多个选项的） .plural-item{ ::v-deep .el-select{ .el-select__tags{ .el-tag:first-child{ width:60px; overflow:hidden; text-overflow:ellipse； } } } } .single-item{ ::v-deep .el-select{ .el-select__tags{ .el-tag:first-child{ width:95px; overflow:hidden; text-overflow:ellipse； } } } }

如果能有更好的解决办法欢迎大神来指点。