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

171 lines
2.8 KiB
Markdown
Raw Normal View History

2021-10-09 10:41:52 +08:00
::: demo
<template>
2021-10-15 14:27:58 +08:00
<lay-page :limit="limit" :total="total" :show-page="showPage"></lay-page>
2021-10-09 22:20:55 +08:00
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
2021-10-15 09:30:37 +08:00
const limit = ref(20)
const total = ref(100)
2021-10-15 14:27:58 +08:00
const showPage = ref(true)
2021-10-15 09:30:37 +08:00
2021-10-09 22:20:55 +08:00
return {
2021-10-15 09:30:37 +08:00
limit,
2021-10-15 14:27:58 +08:00
total,
showPage
2021-10-09 22:20:55 +08:00
}
}
}
</script>
:::
::: demo
<template>
2021-10-15 09:30:37 +08:00
<lay-page :limit="limit" :total="total"></lay-page>
2021-10-09 22:20:55 +08:00
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
2021-10-15 09:30:37 +08:00
const limit = ref(20)
const total = ref(100)
2021-10-09 22:20:55 +08:00
return {
2021-10-15 09:30:37 +08:00
limit,
total
2021-10-09 22:20:55 +08:00
}
}
}
</script>
:::
::: demo
<template>
2021-10-15 14:27:58 +08:00
<lay-page :limit="limit" :total="total" :show-page="showPage" theme="red"></lay-page>
2021-10-09 22:20:55 +08:00
<br>
2021-10-15 14:27:58 +08:00
<lay-page :limit="limit" :total="total" :show-page="showPage" theme="blue"></lay-page>
2021-10-09 22:20:55 +08:00
<br>
2021-10-15 14:27:58 +08:00
<lay-page :limit="limit" :total="total" :show-page="showPage" theme="orange"></lay-page>
2021-10-09 22:20:55 +08:00
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
2021-10-15 09:30:37 +08:00
const limit = ref(20)
const total = ref(100)
2021-10-15 14:27:58 +08:00
const showPage = ref(true)
2021-10-15 09:30:37 +08:00
2021-10-09 22:20:55 +08:00
return {
2021-10-15 09:30:37 +08:00
limit,
2021-10-15 14:27:58 +08:00
total,
showPage
2021-10-09 22:20:55 +08:00
}
}
}
</script>
:::
::: demo
<template>
2021-10-15 14:27:58 +08:00
<lay-page :limit="limit" :total="total" :show-count="showCount" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
2021-10-09 10:41:52 +08:00
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
2021-10-15 09:30:37 +08:00
const limit = ref(20)
const total = ref(100)
2021-10-15 14:27:58 +08:00
const showCount = ref(true)
const showPage = ref(true)
const showLimit = ref(true)
const showRefresh = ref(true)
const showSkip = ref(true)
2021-10-15 09:30:37 +08:00
2021-10-09 10:41:52 +08:00
return {
2021-10-15 09:30:37 +08:00
limit,
2021-10-15 14:27:58 +08:00
total,
showCount,
showPage,
showLimit,
showRefresh,
showSkip
2021-10-09 10:41:52 +08:00
}
}
}
</script>
2021-10-11 00:11:54 +08:00
:::
::: demo
<template>
2021-10-15 14:27:58 +08:00
<lay-page :limit="limit" :total="total" @jump="jump" :show-page="showSkip"></lay-page>
2021-10-11 00:11:54 +08:00
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
2021-10-15 09:30:37 +08:00
const limit = ref(20)
const total = ref(100)
2021-10-15 14:27:58 +08:00
const showPage = ref(true)
2021-10-11 00:11:54 +08:00
const jump = function({ current }) {
2021-10-15 09:30:37 +08:00
console.log("当前页:" + current)
2021-10-11 00:11:54 +08:00
}
return {
2021-10-15 09:30:37 +08:00
limit,
total,
2021-10-15 14:27:58 +08:00
jump,
showPage
2021-10-11 00:11:54 +08:00
}
}
}
</script>
:::
2021-10-13 10:22:16 +08:00
::: field page attributes
2021-10-13 10:04:43 +08:00
:::
2021-10-12 18:00:09 +08:00
| | | |
| ----------- | ------------ | ------- |
| limit | 每页数量 | -- |
| total | 总条数 | -- |
| showCount | 显示总数 | `false` |
| showPage | 显示每页 | `false` |
| showLimit | 显示每页数量 | `false` |
2021-10-11 02:33:17 +08:00
| showRefresh | 显示刷新按钮 | `false` |
| showSkip | 显示跳转 | `false` |
2021-10-13 10:19:38 +08:00
::: field page events
2021-10-13 10:04:43 +08:00
:::
| | | |
| ----------- | ------------ | ------- |
2021-10-13 01:45:59 +08:00
| jump | 切换回调 | { current: 当前页面 } |