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

最新推荐文章于 2025-03-25 10:29:13 发布

renovateF5

最新推荐文章于 2025-03-25 10:29:13 发布

阅读量1.5k

点赞数

分类专栏： elment-ui/element-plus的使用文章标签： elementui html 前端

本文链接：https://blog.youkuaiyun.com/renovateF5/article/details/130129104

版权

elment-ui/element-plus的使用专栏收录该内容

9 篇文章

订阅专栏

文章讨论了一个在Vue项目中遇到的问题，即el-select组件的下拉选项需要实现无限滚动功能。问题在于不同项目中同一段代码表现不一致，有的能直接工作，有的则需失去焦点后重试。解决方案是利用visible-change事件，在下拉框显示时同时启用无限滚动区域。代码示例展示了如何结合v-infinite-scroll指令实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：点击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显示出来