select 下拉=虚拟加载框 + 分页(基于 ElSelectV2 封装) ​

<HuVirtualSelectPage
  filterable
  :pages="pages"
  :options="options"
  v-model="selectValue"
  :loading="loading"
  @pullUp="loadData"
  placeholder="请输入"
></HuVirtualSelectPage>

<script setup>
  import { onMounted, ref } from "vue"
  const options = ref([])
  const loading = ref(false)
  const selectValue = ref([])
  const pages = ref({
    current: 1,
    pageSize: 10,
    total: 11,
  })
  onMounted(() => {
    loadData(true)
  })
  const loadData = async (isFirst = false) => {
    loading.value = true
    const res = await new Promise(reslove => {
      const len = options.value.length
      const arr = []
      setTimeout(() => {
        const t =
          pages.value.pageSize * (pages.value.current + 1) <= pages.value.total || isFirst
            ? pages.value.pageSize
            : pages.value.total - pages.value.pageSize * (pages.value.current - 1)
        for (let i = 0; i < t; i++) {
          arr.push({
            label: `label${len + i}`,
            value: len + i,
          })
        }
        loading.value = false
        reslove(arr)
      }, 1000)
    })
    pages.value.current++
    options.value = options.value.concat(res)
  }
</script>