避坑:在select内部只使用一个input搜索输入！刚开始使用两个input，当模糊检索无数据时，会切换input，input会失去焦点，用户体验不好，产品经理挑刺。

思路：在下拉面板添加一个固定显示<el-option>,并将搜索框input写在里面，在input上绑定模糊匹配function，input相关dom使用position:absolute——选项滚动，搜索框悬浮顶部；

项目源码：

<el-select

              style="margin: 0 10px;"

              size="mini"

              collapse-tags

              v-model.trim="XXXX"

              placeholder="请搜索选择XX（多选）"

              :maxlength="20"

              clearable

              multiple

            >

            <template>

              <el-option disabled :value="''" class="search_input">

                <el-input

                placeholder="请搜索选择XX（多选）"

                size="mini"

                prefix-icon="el-icon-search"

                v-model="dropDownValue"

                @input="dropDownSearch"

                clearable></el-input>

              </el-option>

              <div class="marginDiv"></div>

              <p class="search_txt" v-if="merchantIdsListTem.length=='0'">暂无搜索数据</p>

            </template>

            <!-- <template #empty >

              <el-input  

                placeholder="请搜索选择公司（多选）"

                class="search_input"

                autofocus

                size="mini"

                prefix-icon="el-icon-search"

                v-model="dropDownValue"

                @input="dropDownSearch"

                clearable></el-input>

             

            </template> -->

              <el-option

                v-for="item in merchantIdsListTem"

                :key="item.id"

                :value="item.id"

                :label="item.text"

              />

            </el-select>

模糊匹配dropDownSearch（）：

function dropDownSearch(){

      let result = merchantIdsList.value.filter(item => item.text.includes(dropDownValue.value));

      merchantIdsListTem.value =  result;

    }

merchantIdsList 是初始选项数组对象；

实现效果：