Skip to content
On this page

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


显示代码
html
<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>

Attributes

参数说明类型默认值
loading加载状态Booleanfalse
pullUp加载更多方法Function-
pages分页数据Object'{ current: 1, pageSize: 10, total: 0 }'
pagesOptions分页配置项Object'{ current: "current", pageSize: "pageSize", total: "total" }'
(...其它的)其它属性方法参照 element-plus 官网 select--

pagesOptionsAttributes 的配置

参数说明类型默认值
current当前页字段名称String'current'
pageSize一页条数字段名称String'pageSize'
total总数字段名称String'total'

Released under the MIT License.