el-select下拉框使用 v-infinite-scroll第一次不成功

需求：点击el-select之后，出现的下拉框可以请求数据无限滚动，很奇怪的一点是，不同项目的同一个代码，点击下拉框之后，有的可以直接无限滚动，有的第一次不成功，失去焦点之后重新点就有效果了。

解决方法，使用visible-change，当下拉框显示的时候，同时显示无限滚动区域

<template>
  <div style="width: 100%">
    <el-select
      v-if="isMounted"
      v-model="list"
      style="width: 100%"
      filterable
      remote
      clearable
      reserve-keyword
      remote-show-suffix
      :placeholder="placeholder"
      :remote-method="remoteMethod"
      :class="!list ? 'select-avatar' : !showAvatar ? 'select-avatar' : ''"
      @change="onSelectChange"
      @clear="onClearEvent"
      @visible-change="
        (e) => {
          vis = e
        }
      "
    >
      <template #prefix>
        <span v-if="showAvatar && list" class="select-avatar-img">
          <img :src="avatar || ''" />
        </span>
      </template>
      <div v-if="vis" v-infinite-scroll="onScrollEvent" style="height: 200px; overflow: auto">
        <el-option v-for="item in options" :key="item.id" :label="item.userName" :value="item.userId"> {{ item.userName }}-{{ item.policeNo }} </el-option>
      </div>
    </el-select>
  </div>
</template>

isMounted 最好带上，在onMounted的时候为true

vis 这个在visible-change调用之后为true，把v-infinite-scroll="onScrollEvent" 所在的dom显示出来