element-ui框架中el-select组件在按回车时，如何隐藏下拉菜单，并触发键盘事件

场景：

1. 根据产品需求，下拉菜单在按下回车后进行搜索
2. 判断页面所需的筛选项是否为空，如果为空，按下回车，不执行查询
3. 按下回车，如何让下拉菜单隐藏（或者失去焦点，因为下拉项要显示的前提是获取焦点）

    <el-form
      label-width="110px"
      class="ele-form-search"
      @keyup.enter.native="search"
      @submit.native.prevent
    >
    <el-form-item label="是否被占用" prop="isUsed">
        <el-select
          v-model="where.isUsed"
          placeholder="请选择"
          clearable
          class="ele-fluid"
          ref="selectProvinces"
          @visible-change="isShowSelectOptions"
        >
          <el-option
            v-for="item in usedStatuslistdata"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    <el-form-item label="状态" prop="isDisable">
        <el-select
          v-model="where.isDisable"
          placeholder="请选择"
          clearable
          class="ele-fluid"
          ref="selectCitys"
          @visible-change="isShowSelectOptions"
        >
          <el-option
            v-for="item in disableStatuslistdata"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    <div class="ele-text-center">
      <el-button size="small" type="primary" @click="search">搜索</elbutton>
      <el-button size="small" @click="reset">重置</el-button>
      <el-button size="small" @click="close">关闭</el-button>
    </div>
</el-form>

　　

　　

created() {
	// 全局添加事件监听
	window.addEventListener('keyup', this.search)
},
methods: {
	// 是否显示下拉框
	isShowSelectOptions(isShowSelectOptions){
		if(!isShowSelectOptions) this.$refs.selectProvinces.blur();
		if(!isShowSelectOptions) this.$refs.selectCitys.blur();
	},

	// 条件查询数据
	search(e) {}
}

　　

3. 重要函数：

1. @visible-change=“isShowSelectOptions”

或者

直接在

el-select上加上

:popper-append-to-body="!showSearch ? true : false"

 

例如：

 

　　　　　　<el-form-item label="状态" prop="partsStatusId">
            <el-select
              v-model="where.partsStatusId"
              filterable
              placeholder="请选择"
              clearable
              class="ele-fluid"
              :popper-append-to-body="!showSearch ? true : false"
            >
              <el-option
                v-for="item in partsStatuslistdata"
                :key="item.id"
                :label="item.desc"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

　　

 

参考：https://www.freesion.com/article/32101060707/