前端表格分页组件

分页组件使用

分页组件一般和表格组件一起使用，只需要回调 useTable hook 中的函数即可。

<pagination
  v-bind="state.pagination"
  @current-change="currentChangeHandle"
  @size-change="sizeChangeHandle"
></pagination>

const { currentChangeHandle, sizeChangeHandle } = useTable(state);

使用提示

分页组件通过 v-bind 绑定 state.pagination 对象，自动同步当前页码、每页条数等分页状态。

<pagination>
  <template #default="{ node, data }"> </template>
</pagination>

属性	类型	默认值	说明
`current`	`Number`	`1`	当前页码
`size`	`Number`	`10`	每页展示的条数
`total`	`Number`	`0`	数据总数
`pageSizes`	`Array`	`[1, 10, 20, 50, 100, 200]`	每页展示的条数可选项
`layout`	`String`	`'total, sizes, prev, pager, next, jumper'`	分页组件的布局

注意事项

修改 pageSizes 数组时，确保当前的 size 值在可选项中，否则可能导致显示异常。

本页目录