el-autocomplete回车在显示弹出层

业务需求：只有当用户按下回车键之后，在显示组件的弹出层

一、需要将el-autocomplete挂载到当前的dom节点下

看了el-autocomplete的源码发现，其提供了一个props属性：popperAppendToBody，默认为true，该属性是默认将其挂在到body标签下。如果挂载在body标签下样式穿透不太方便。

二、通过变量控制组件的弹出层是否显示

data() {
    return {
    	// 默认不显示
    	isShow: true,
    	// 定义一个变量用来存储el-autocomplete组件用来返回数据的函数
    	cbFun: null
    }
 }

 <div :class="{'formItemSearch':isShow}">
     <el-autocomplete
         v-model="form.s_name"
         value-key="s_name"
         style="width: 100%;"
         :fetch-suggestions="querySearch"
         placeholder="请输入内容"
         :trigger-on-focus="false"
         :popper-append-to-body="false"
          @keyup.enter.native="enterQuerySearch"
          @select="handleSelect"
          />
   </div>

样式穿透，通过组件外层的div来控制弹出层是否隐藏

/*
 	使用v-deep样式穿透，将其隐藏
 */
.formItemSearch::v-deep .el-autocomplete .el-autocomplete-suggestion{
  display: none;
}

方法处理

代码如下（示例）：

  methods: {
    	 // el-autocomplete组件绑定的返回建议的方法
		querySearch(query, cb, isShow) {
		// 由于业务要求只有用户按下回车才去请求接口，所以需要将cb函数提前存储
	      this.cbFun = cb
	      // 定义list变量用来模拟数据接口返回数据为空的情况
	      const list = [
	        {
	          id: 'a-1',
	          s_number: '无匹配数据',
	          s_name: '无匹配数据',
	          m_number: '无匹配数据'
	        }
	      ]
	      if (isShow === 1) {
	         // 用户点击回车时isShow === 1，将组件的弹出层取消隐藏，让用户看到数据正在加载中
	          this.isShow = false
	          // 接口请求
	          getlist({query: query}).then((res) => {
	          // 判断接口返回的列表是否为空
	            if (res.cont.length > 0) {
	              cb(res.cont)
	            } else {
	              cb(list)
	            }
	          }).catch((e) => {
	          // 使用catch捕捉接口请求异常的情况
	            cb(list)
	          })
	        }
	      } else {
	      // 组件的弹出层继续隐藏
	        this.isShow = true
	      }
	    },
	   // 绑定回车事件
		enterQuerySearch(data) {
			// 将提前存储的cbfun赋值给querySearch
	      this.querySearch(data, this.cbFun, 1)
	    },
	     // 点击el-autocomplete组件的弹出层中的数据时触发
	    handleSelect(resData) {
	     // 当点击的无匹配数据时，将相关数据重置
	      if (resData.id !== 'a-1') {
	        this.form.s_name = resData.s_name
	      } else {
	        this.form.s_name = null
	        this.form.m_number = null
	        this.form.s_number = null
	      }
	    }
  }