【关于Element UI中el-autocomplete组件】二、el-autocomplete组件解决@blur与@select事件冲突

最新推荐文章于 2025-04-27 19:19:17 发布

XujiRe

最新推荐文章于 2025-04-27 19:19:17 发布

阅读量6k

点赞数 3

分类专栏： Element UI 文章标签： ui vue.js elementui

本文链接：https://blog.youkuaiyun.com/XujiRe/article/details/125413153

版权

Element UI 专栏收录该内容

7 篇文章

订阅专栏

小伙伴们，上一篇小编讲了如何在el-autocomplete组件的下拉建议值框的底部添加一个固定按钮，由于开发需求，小编要在原有的基础上监听到输入框的失焦事件也就是@blur事件，但是当小编写好了方法测试一下。
却出现了点击选项也不会将选定的值显示在输入框中，相当于没有选中，因此小编判断是@blur与@select事件冲突，那么问题来了，这是什么原因导致的这两个事件的冲突呢，小编试了@blur.stop也是没有反应以及@blur.capture.native，但是都没办法解决这个冲突，于是小编问了大佬，大佬找了一下午发现是popper-append-to-body设置为false的问题，小编先上代码

<el-autocomplete
   class="voucher-subject-input"
   :ref="'inputcredit_2_'+index"
   :popper-append-to-body="true"
   :class="{ 'subject-opacity': voucher.items[index].showText }"
   v-model="voucher.items[index].subjectName"
   value-key="name"
   :fetch-suggestions="querySearch"
   :highlight-first-item="true"
   @blur="handleSelectBlur(voucher.items[index],index)"
   @select="handleSelectSubject($event,index)"
   @focus="handleFocusSubject($event,index)"
   >
  <template slot-scope="{ item }">
     <el-button
       v-if="item.is_add"
       type="primary" plain
       style="width: 100%;position: absolute;bottom: 0px;left: 0px;"
       class="add-button"
       @click="accAddBtn()"
       >
       添加
    </el-button>
 </template>
</el-autocomplete>

那小编是一个快字的改为true啊，哇哦，这个冲突是解决了，但是小编原本的添加按钮由原本的这样

变成了这样
在这里插入图片描述
也就是小编原本设置的下拉框的内边距失去了作用，那这个可怎么解决呢，小编使用了好几个深度选中器都没办法将自己改的css写入样式中，这是看到el-autocomplete文档有个popper-class参数，它是什么呢？

下拉列表的类名，那不是正是我想要的吗，于是啊，小编在组件中加入了popper-class=“acc-search”

<el-autocomplete
   class="voucher-subject-input"
   :ref="'inputcredit_2_'+index"
   :popper-append-to-body="true"
   popper-class="acc-search"
   :class="{ 'subject-opacity': voucher.items[index].showText }"
   v-model="voucher.items[index].subjectName"
   value-key="name"
   :fetch-suggestions="querySearch"
   :highlight-first-item="true"
   @blur="handleSelectBlur(voucher.items[index],index)"
   @select="handleSelectSubject($event,index)"
   @focus="handleFocusSubject($event,index)"
   >
  <template slot-scope="{ item }">
     <el-button
       v-if="item.is_add"
       type="primary" plain
       style="width: 100%;position: absolute;bottom: 0px;left: 0px;"
       class="add-button"
       @click="accAddBtn()"
       >
       添加
    </el-button>
 </template>
</el-autocomplete>

小编又是一个快字的在当前页面设置css样式，可是怎么都不生效呢？
原来设置popper-class="acc-search"的话要在全局样式中去修改他，于是小编在App.vue的style中写下这么两行代码

<style>
    /* 修改远程搜索框内容自适应 */
    .acc-search .el-scrollbar__wrap{
      padding-bottom: 40px;
    }
</style>

果不其然，按钮又回到原本的位置了。
困扰小编三天的一个bug终于解决了。
如果小伙伴们有遇到类似的问题，我们可以一起讨论哦，或者小伙伴们有更好的解决方案，麻烦跟小编分享一下哦