el-autocomplete修改下拉框宽度

需求为在输入框中输入内容后，下面弹出匹配到的内容，没有匹配到就显示当前内容,实现后发现下拉框和输入框宽度一样，并不能完全显示全后台返回的内容，如下图

 

 

 

f12后发现下拉的代码并没有在当前div下，而是在body下，如下图

 

 

 

因此直接在页面上修改样式，不起作用，官方也没有说，查了很多文献，发现了解决方案，需要在模块中添加:popper-append-to-body="false"，然后在看下拉框就到div下面了，然后再修改css样式：& /deep/ .my-kqoption {width: 57%!important;}

问题就解决了，如下图：

 

 

 

附上代码：

VUE

<div class="st-oparate-col">
<el-autocomplete
popper-class="my-kqoption"
v-model="zName"
:fetch-suggestions="querySearch2"
:popper-append-to-body="false"
placeholder="请输入专家姓名"
@select="handleSelect2">
<template slot-scope="{ item }" >
<div class="name">{{ item.value }}</div>
<div class="zjName">{{ item.zjName }}</div>
</template>
</el-autocomplete>
</div>
VUE-STYLE

& /deep/ .my-kqoption {
width: 57%!important;
}
 
————————————————
版权声明：本文为CSDN博主「qq_37522951」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_37522951/article/details/106235050