你想要的 el-select 当我们为el-select设置了multiple属性（多选）、collapse-tags属

“我正在参加「掘金·启航计划」”

前言

当我们为el-select设置了multiple属性（多选）、collapse-tags属性（合并为一段文字）、filterable属性（可搜索）后，最后会呈现如下的效果（如下图）。然而这并不是我们想要的，这种不友好的展示效果，原因在于可搜索功能的输入框导致，难道要放弃搜索的功能？非也，非也。

解决办法

考虑一下搜索功能的输入框位置：

将原来的filterable属性去掉
将搜索功能的输入框移入下拉框的弹出层（如下图）

关键代码

<el-select
    v-model="select"
    placeholder="请选择"
    :multiple="multiple"
    :collapse-tags="collapseTags"
    :popper-append-to-body="false"
    clearable
>
    <div class="input-box" style="width:90%;margin-left:5%;"> // 关键所在
      <el-input type="text" placeholder="请输入"  v-model="dropDownValue" clearable @input="dropDownSearch" />
    </div>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
</el-select>

最后

是不是如你所愿：你想要的el-select ...