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