Vue3+NaiveUi之分页<n-pagination>

效果图

属性说明

1 pageCurrent：当前页

2 pageTotal：总条数

3 pageSize：每页条目数

4 pageSizes：每页展示条数选择集合

5 pageEvent：选择页事件

6 pageSizeEvent：选择条目数事件

7 size：分页组件尺寸 【'small' | 'medium' | 'large'】

8 show-size-picker：是否显示每页条数的选择器

9 page-slot：页码显示的个数

10 #prev，#next：自定义上一步和下一步，默认为上一页和下一页

11 #prefix，#suffix：前后缀

示例Code

    <template>
        <main>
          <n-pagination
                :page="pageCurrent" 
                :item-count="pageTotal"
                :page-size="pageSize"
                size="medium"
                show-size-picker
                :page-slot="8"
                :page-sizes="pageSizes"
                :on-update:page="pageEvent"
                :on-update:page-size="pageSizeEvent">
            <template #prefix="{ itemCount }"> 共 {{ itemCount }} 项 </template>
            <template #prev> 向前 </template>
            <template #next> 向后 </template>
          </n-pagination>
        </main>
    </template>
    
    <script setup lang="ts">
    defineProps<{
        pageCurrent: Number,
        pageSize: Number,
        pageTotal: Number,
    }>()
    
    const emit = defineEmits(['toPage'])
    const pageSizes = ref([
        { label: '10 每页', value: 10 },
        { label: '20 每页', value: 20 },
        { label: '50 每页', value: 50 },
        { label: '200 每页', value: 100  }
    ])
    
    const pageEvent = (page: Number,) => {
        emit('toPage', "PAGE", page);
    }
    const pageSizeEvent = (size: Number,) => {
        emit('toPage', "SIZE", size);
    }
    
    </script>