layui/example/docs/zh-CN/components/page.md

::: title 基础使用 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const limit = ref(20) const total = ref(100) const showPage = ref(true) return { limit, total, showPage } } } </script>

:::

::: title 简单模式 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const limit = ref(20) const total = ref(100) return { limit, total } } } </script>

:::

::: title 插槽使用 :::

::: demo

上 下 <script> import { ref } from 'vue' export default { setup() { const limit = ref(20) const total = ref(100) return { limit, total } } } </script>

:::

::: title 不同主题 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const limit = ref(20) const total = ref(100) const showPage = ref(true) return { limit, total, showPage } } } </script>

:::

::: title 完整分页 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const limit = ref(20) const total = ref(100) const showCount = ref(true) const showPage = ref(true) const showLimit = ref(true) const showRefresh = ref(true) const showSkip = ref(true) return { limit, total, showCount, showPage, showLimit, showRefresh, showSkip } } } </script>

:::

::: title 切换事件 :::

::: demo

<script> import { ref } from 'vue' export default { setup() { const limit = ref(20) const total = ref(100) const showPage = ref(true) const jump = function({ current }) { console.log("当前页:" + current) } return { limit, total, jump, showPage } } } </script>

:::

::: title 分页属性 :::

::: table

属性	描述	默认值
limit	每页数量	--
total	总条数	--
showCount	显示总数	false
showPage	显示每页	false
showLimit	显示每页数量	false
showRefresh	显示刷新按钮	false
showSkip	显示跳转	false

:::

::: title 分页事件 :::

::: table

事件	描述	参数
jump	切换回调	{ current: 当前页面 }

:::

::: title 分页插槽 :::

::: table

插槽	描述	默认值
prev	上一页	上一页
next	下一页	下一页

:::