示例

共50页 / 500条上一页1234567...下一页末页10条/页 20条/页 30条/页 40条/页 50条/页 跳至页GO

代码

<template>
  <zz-pagination
    :pageNumber="currentPage"
    :pageSizeArray="[10, 20, 30, 300]"
    :totalCount="500"
    :pageGroup="7"
    @jumpPage="jumpPage"
    :layouts="['pages', 'info', 'next', 'prev', 'goto']"
  ></zz-pagination>
</template>

<script setup>
  const currentPage = ref(1);
  const pageSize = ref(10);
  const jumpPage = (data) => {
    console.log(data.currentPage, "当前页数");
    console.log(data.currentSize, "每页几条");
    currentPage.value = data.currentPage;
    pageSize.value = data.currentSize;
  };
</script>

属性

参数	说明	类型	是否必要	默认值	可选值
pageNumber	当前页码	Number	false	1	大于 0 的整数
pageSizeArray	每页条数	Array	false	[10, 20, 30, 40,50]	大于 0 的整数数组
totalCount	总条数	Number	true	--	大于 0 的整数
pageGroup	连续页码个数	Number	false	正奇数
layouts	功能显隐	Array	false	["next", "prev", "pages", "goto", "info"]	["next", "prev", "pages", "goto", "info"]

事件

名称	说明	类型
jumpPage	pageNumber/currentSize 改变时触发	function