给el-select添加上拉加载？一篇短文带你搞定！

2023-11-19 20:35:04

无星的前端之旅（二十）-Element Plus给el-select添加上拉加载的过程

作为一名前端开发工程师，我经常会遇到各种各样的需求，其中之一就是给el-select添加上拉加载的功能。Element Plus作为目前非常流行的前端UI框架，其功能强大，使用方便，深受广大开发者的喜爱。在本文中，我将详细介绍如何在Element Plus中给el-select添加上拉加载的功能，希望对大家有所帮助。

背景

在实际项目中，我们经常会遇到需要在下拉框中展示大量选项的情况。如果选项数量过多，会导致页面加载缓慢，甚至出现卡顿现象。为了解决这个问题，我们可以使用上拉加载功能，即在页面初始化时只加载部分选项，当用户滚动到底部时再加载更多选项。

实现过程

1. 安装依赖

npm install vue-virtual-scroller --save

2. 创建虚拟列表组件

import { ref, onMounted } from 'vue'
import { useVirtualList } from 'vue-virtual-scroller'

export default {
  setup() {
    const list = ref([])
    const { visibleRows, scrollElementRef } = useVirtualList()

    onMounted(() => {
      // 初始化数据
      for (let i = 0; i < 100; i++) {
        list.value.push({ id: i, name: `选项 ${i}` })
      }
    })

    return {
      list,
      visibleRows,
      scrollElementRef
    }
  },
  render() {
    return (
      <el-select>
        <el-option
          v-for="item in visibleRows"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    )
  }
}

3. 监听滚动事件

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    // 用于控制上拉加载是否正在进行
    const loading = ref(false)

    const onScroll = (e) => {
      // 判断是否滚动到了底部
      const { scrollTop, scrollHeight, clientHeight } = e.target
      if (scrollTop + clientHeight >= scrollHeight) {
        if (!loading.value) {
          loading.value = true
          // 加载更多数据
          for (let i = 100; i < 200; i++) {
            list.value.push({ id: i, name: `选项 ${i}` })
          }
          loading.value = false
        }
      }
    }

    onMounted(() => {
      window.addEventListener('scroll', onScroll)
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', onScroll)
    })
  }
}