目录

Page 分页

ProTable的配套组件

为什么使用？

该组件传入了el-pagination的一些预设配置，如果需要为了效果统一，可以使用这个组件
监听了页码、页面尺寸变化，统一抛出了query事件
提供了reset接口，用于重置页面

基础用法

Total 88

Go to

vue

<template>
  <el-button @click="reset()">reset</el-button>
  <jlc-page ref="pageRef" :total="88" @query="onQuery" :page-sizes="pageSizes"></jlc-page>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { JlcPage } from '@sz-jlc/admin-vue3'

const pageRef = ref()

const pageSizes = [10, 20, 30, 50, 100]

const onQuery = (pageInfo: any) => {
  console.log(pageInfo)
}

const reset = () => {
  pageRef.value.reset()
}
</script>

属性

属性名	说明	类型	可选值	默认值	是否必填
total	总条数	number	-	-	是
el-pagination的属性	预期情况下支持所有el-pagination的属性，若某个场景下存在问题，请反馈。	-	-	-	否

方法

方法名	描述	参数
query	触发query事件	queryNow(是否执行查询，会传递给query事件作为回调参数，默认为true)
setPage	设置page参数	pageInfo: { pageNum: number, pageSize: number } queryNow(是否执行查询，会传递给query事件作为回调参数，默认为true)
reset	重置	queryNow(是否执行查询，会传递给query事件作为回调参数，默认为true) resetSize(是否重置页面尺寸)
el-pagination的方法	预期情况下支持所有el-pagination的方法，若某个场景下存在问题，请反馈。	-

事件

事件名	说明	回调参数
query	触发查询时，会在页码、页面尺寸变化时触发	pageInfo: { pageSize: number, pageNumber: number }(页面信息) queryNow(是否执行查询，通过query方法传入的参数)
el-pagination的事件	预期情况下支持所有el-pagination的事件，若某个场景下存在问题，请反馈。	-

插槽

插槽	说明
-	-