分页容器 ProPagination

集成分页组件的布局容器

自动分页模式

根据传入数据源，进行本地分页

1

2

3

4

5

6

7

8

9

10

共 30 条

• 1
• 2
• 3

10 条/页前往

<script lang="ts" setup>
import { ProPagination } from '@vrx-arco/pro-components'
import { Card, List, ListItem } from '@arco-design/web-vue'
</script>

<template>
  <Card>
    <ProPagination
      style="height: 500px"
      pagination
      :data="
        Array(30)
          .fill(1)
          .map((_, index) => index + 1)
      "
    >
      <template #default="list">
        <List :data="list">
          <template #item="{ item }">
            <ListItem>{{ item }}</ListItem>
          </template>
        </List>
      </template>
    </ProPagination>
  </Card>
</template>

受控分页模式

暂无数据

共 0 条

10 条/页前往

<script lang="ts" setup>
import { ProPagination } from '@vrx-arco/pro-components'
import { Card, List, ListItem } from '@arco-design/web-vue'
import { usePaginatedData } from '@vrx/core'

const { pagination, pageChange, pageSizeChange, list } = usePaginatedData(
  ({ pagination }) =>
    Promise.resolve({
      data: Array(20)
        .fill(1)
        .map((_, index) => pagination.pageNum * (index + 1)),
      total: 20,
    }),
  { immediate: true, initData: () => [], path: 'data', totalPath: 'total' }
)
</script>

<template>
  <Card>
    <ProPagination
      style="height: 500px"
      :pagination="pagination"
      :data="list"
      @currentChange="pageChange"
      @pageSizeChange="pageSizeChange"
    >
      <template #default="list">
        <List :data="list">
          <template #item="{ item }">
            <ListItem>{{ item }}</ListItem>
          </template>
        </List>
      </template>
    </ProPagination>
  </Card>
</template>

API

<pro-pagination> Props

暂无数据

<pro-pagination> Events

暂无数据

<pro-pagination> Slots

暂无数据