TAY
笔记 · · 阅读 236

Laravel vue3/nuxt3 antdv 分页 pagination

itemRender 用于自定义页码的结构,可用于优化 SEO

<a-pagination class="mt-8" v-model:current="products.current_page" :pageSize="products.per_page" :total="products.total" @change="changePage" hideOnSinglePage>
    <template #itemRender="{ page, type }">
        <template v-if="type === 'jump-next' || type === 'jump-prev'">
            ...
        </template>
        <nuxt-link v-if="type === 'prev'" :to="'ai?page='+(currentPage > 1 ? Number(currentPage - 1) : currentPage)"><LeftOutlined class="text-gray-400 hover:text-green-500" /></nuxt-link>
        <nuxt-link v-if="type === 'page'" :to="'ai?page='+page">{{ page }}</nuxt-link>
        <nuxt-link v-if="type === 'next'" :to="'ai?page='+(currentPage < products.last_page ? Number(currentPage + 1) : currentPage)"><RightOutlined class="text-gray-400 hover:text-green-500" /></nuxt-link>
    </template>
</a-pagination>
目录