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