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; 
    }