多选选择器在 ie10 下不会自动换行

Element ui 下拉框(多选)ie10下不会自动换行

下拉框部分代码：

<el-select v-model="form.region"
    placeholder="请选择活动区域"
    multiple>
    <el-option label="区域一" value="shanghai"></el-option>
    <el-option label="区域二" value="beijing"></el-option>
    <el-option label="区域三" value="tianjin"></el-option>
</el-select>

element ui 对应渲染的原生 html 结构

<div class="el-select el-select--mini">
  <div class="el-select__tags" style="width: 100%; max-width: 147.66px;">
    <span>
      <span class="el-tag el-tag--info el-tag--mini el-tag--light">
        <span class="el-select__tags-text">区域一</span>
        <i class="el-tag__close el-icon-close"></i>
      </span>
      <span class="el-tag el-tag--info el-tag--mini el-tag--light">
        <span class="el-select__tags-text">区域二</span>
        <i class="el-tag__close el-icon-close"></i>
      </span>
      <span class="el-tag el-tag--info el-tag--mini el-tag--light">
        <span class="el-select__tags-text">区域三</span>
        <i class="el-tag__close el-icon-close"></i>
      </span>
    </span>
  </div>
  <div class="el-input el-input--mini el-input--suffix">
    <input class="el-input__inner" style="height: 54px;" type="text" readonly="readonly" placeholder="" autocomplete="off">
    <span class="el-input__suffix">
      <span class="el-input__suffix-inner">
        <i class="el-select__caret el-input__icon el-icon-arrow-up"></i>
      </span>
    </span>
   </div>
 </div>

IE10表现如下：

form_select_question.jpg

修改方法：

在 ie10 控制台处发现，el-select__tags 样式下的 display: flex;是影响样式不能换行的原因，于是添加如下样式：

//备注：.v-roleManagement 是当前 .vue文件对应的根标签的样式名称，本地演示去掉 .v-roleManagement 即可
<style lang="less">
.v-roleManagement {
  .el-select__tags {
    display: inline-block;
  }
}
</style>

效果：

form_select_answer.jpg

官方解决：为组件添加 collapse-tags 属性

此种方式不太直观

<el-select v-model="form.region"
    placeholder="请选择活动区域"
    multiple
    collapse-tags>
    <el-option label="区域一" value="shanghai"></el-option>
    <el-option label="区域二" value="beijing"></el-option>
    <el-option label="区域三" value="tianjin"></el-option>
</el-select>

效果:

form_select_collapse-tags.jpg