如何自动关闭el-select下拉框

需求：

        页面上方的筛选框使用了el-select组件，并且整体页面有滚动条。如打开了下拉框，往下滑动页面时，下拉框则需要自动关闭掉。

实现html代码：

        1.在el-select上添加个ref。通过refs来获取el-select，并且用blur方法关闭掉下拉框。

        

 <el-form
    ref="formRef"
    :model="formData"
    label-width="100px"
    label-position="top"
    size="small"
    element-loading-spinner="el-icon-loading"
    class="custom-form custom-scroll"
  >
   <el-form-item label="工号">
     <el-select
          size="small"
          v-model="formData.jobId"
          popper-class="NL-select job-select"
          placeholder="请选择"
          clearable
          filterable
          :popper-append-to-body="false"
          class="inlineSelect"
          ref="positionRef"
          @change="handleChoosePosition"
        >
        <el-option
            v-for="item in optionList.jobList"
            :key="item.jobId"
            :label="item.jobData"
            :value="item.jobId"
          >
             {{item.name}
          </el-option>
        </el-select>
    </el-form-item>
</el-form>

实现JS代码：

       1. 先要监听到页面滚动的区域，我使用了弹窗组件，所以我是在打开弹窗时的方法添加了监听。 （formRef 是我给el-form的ref名称，我页面的滚动是写在el-form上，所以要找到这个位置）

        

// 打开弹窗的方法  监听滚动的区域
openDialog() {
  this.dialogVisible = true;
  this.$nextTick(() => {
      this.$refs.formRef.$el.addEventListener(
         "scroll",
          this.autoCloseVisible
        );
   });
},

 // 列表滑动下方时，隐藏el-select选择框的内容
 autoCloseVisible() {
     this.$refs.positionRef.blur();
 }


// 关闭弹窗-取消监听

beforeClose() {
  this.$refs.formRef.$el.removeEventListener(
    "scroll",
    this.autoCloseVisible
  );
}