el-autocomplete 踩坑实录#VUE #el-autocomplete #下拉清空 #下拉遮挡 #下拉宽度不够

目的：实现远程查询下拉框
初级小学生，选用了组件，遇到了选中后无法手动赋值触发查询，赋值查询后下拉框无法清空，下拉框被遮挡，下拉框宽度不够，关于下拉框遮挡和下拉框宽度都分别找到了解决办法，但这俩解决办法互相冲突，如有大神解决了在评论回复我一下，特做此记录

<!--* @Description: 人员放大镜查询、快查组件* @Author: cxq* @Date: 2021-11-02 19:17:46* :highlight-first-item="true" 默认选中第一条* :popper-append-to-body="true" 以body为符节点解决下拉框被遮挡问题，但"el-autocomplete-suggestion"不生效*:popper-append-to-body="false"  ，popper-class="el-autocomplete-suggestion"可以解决下拉框宽度不够问题，但下拉框会被遮挡
-->
<template><el-form-item label="个人编号"><el-autocompleteref="autocomplete"v-model="personId"popper-class="el-autocomplete-suggestion"class="local-bizz-person-search-width":fetch-suggestions="querySearch":trigger-on-focus="false":popper-append-to-body="true":disabled="isDisabled":highlight-first-item="true"placeholder="请输入个人编号、身份证号码、姓名"@select="handleSelect"><div slot-scope="{item}">{{ item.personId }}：{{ item.name }}</div><islot="suffix"class="el-input__icon el-icon-search hsa-input-icon-search"@click="searchClick"></i></el-autocomplete><person-dialogref="dialog"@getData="getPersonInfo"></person-dialog></el-form-item>
</template><script>
import personDialog from './widget/person-dialog'import { personQuickSearch } from './person-search.service'
export default {name: 'LocalBizzPersonSearch',components: {personDialog},props: {allQuery: {type: Boolean,default: false}},data() {return {options: [],personId: '',isDisabled: false}},methods: {/*** 录入触发查询**/searchClick() {if (!this.isDisabled) {this.$refs.dialog.dialogFormVisible = true}},/*** 单位快查，支持（单位编号，单位名称查询）**/async querySearch(queryString, cb) {const restaurants = []debugger//如果入参为空停止查询if (this.$local_bizz_util.validateUtils.isNull(queryString) ||(this.$local_bizz_util.validateUtils.isChinese(queryString) && queryString.length < 2) ||(this.$local_bizz_util.validateUtils.isNumber(queryString) && queryString.length < 9)) {cb(restaurants)return}this.options = await this.queryperson()if (restaurants.length === 1) {this.handleSelect(restaurants[0])cb()} else {cb(this.options)}},/*** 选中后重新组装结果，并将结果抛出**/handleSelect(item) {if (!item) {this.$alert('未获取到该人员基本信息', '查询失败', {type: 'error',callback: action => {console.log(action)}})return}this.personId = item.personId + ''this.$emit('getData', item)},/*** 放大镜抛出结果**/getPersonInfo(data) {this.handleSelect(data[0])},/*** 手动触发查询**/async doQuery(value) {//清空下拉框this.$refs.autocomplete.suggestions = []let restaurants = []this.personId = valuerestaurants = await this.queryperson()if (restaurants.length === 1) {this.personId = restaurants[0].personId + ''this.$emit('getData', restaurants[0])} else if (restaurants.length > 1) {this.$alert('根据查询条件返回多条人员信息，请确认数据', '查询失败', {type: 'error',callback: action => {console.log(action)}})} else {this.$alert('未获取到该人员基本信息', '查询失败', {type: 'error',callback: action => {console.log(action)}})}},/*** 调用后台查询**/async queryperson() {//组装查询入参const quickSearchParamDTO = {}quickSearchParamDTO.queryParam = this.personIdquickSearchParamDTO.likeCheck = '1'quickSearchParamDTO.allQuery = this.allQuery//调用查询中心查询单位信息console.log(quickSearchParamDTO)const res = await personQuickSearch(quickSearchParamDTO)let resultList = []if (res != null && res.personInfoList != null) {resultList = res.personInfoList//重组个人信息，添加险种信息及单位信息for (var i = 0; i < resultList.length; i++) {let units = ''resultList[i].insuranceList = []resultList[i].unitList = []for (var j = 0; j < res.insuranceList.length; j++) {if (resultList[i].personId === res.insuranceList[j].personId) {resultList[i].insuranceList.push(res.insuranceList[j])}res.unitInfoList.forEach(unit => {if (res.insuranceList[j].unitId === unit.unitId && units.indexOf('-' + unit.unitId) === -1) {resultList[i].unitList.push(unit)units = units + '-' + unit.unitId}})}}}return resultList}}
}
</script>
<style scoped>
/deep/ .el-autocomplete-suggestion{width: auto!important;
}
.local-bizz-person-search-width{display:inline;
}
</style>