2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-04 06:32:23 +03:00
Files
vue-select/docs/guide/pagination.md
T
Jeff Sagal 223f3a6d85 Squashed commit of the following:
commit 8c3a1b107b
Author: Jeff Sagal <sagalbot@gmail.com>
Date:   Fri Jul 15 09:57:37 2022 -0700

    bump to vitepress 1.0.0-alpha.4

commit 96ff08406c
Author: Jeff Sagal <sagalbot@gmail.com>
Date:   Wed Feb 23 10:25:36 2022 -0800

    vitepress wip

    mostly working, feeling like vuepress should still be considered

commit f3e22e0439
Author: Jeff Sagal <sagalbot@gmail.com>
Date:   Sat Feb 19 17:18:30 2022 -0800

    remove yarn, rename readme

commit 8cd3bbeb51
Author: Jeff Sagal <sagalbot@gmail.com>
Date:   Sat Feb 19 17:17:22 2022 -0800

    install vitepress
2022-07-18 09:40:42 -07:00

854 B

::: tip Pagination is supported using slots available with Vue Select 3.8 and above. :::

Pagination can be a super helpful tool when working with large sets of data. If you have 1,000 options, the component is going to render 1,000 DOM nodes. That's a lot of nodes to insert/remove, and chances are your user is only interested in a few of them anyways.

To implement pagination with Vue Select, you can take advantage of the list-footer slot. It appears below all other options in the drop down list.

To make pagination work properly with filtering, you'll have to handle it yourself in the parent. You can use the filterable boolean to turn off Vue Select's filtering, and then hook into the search event to use the current search query in the parent component.

<<< @/.vitepress/components/Paginated.vue