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-autocomplete
      ref="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>
      <i
        slot="suffix"
        class="el-input__icon el-icon-search hsa-input-icon-search"
        @click="searchClick"
      ></i>
    </el-autocomplete>
    <person-dialog
      ref="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 = value
      restaurants = 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.personId
      quickSearchParamDTO.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>