[修复]分页组件中每页数量变化时触发limit事件

This commit is contained in:
castle 2021-12-27 16:31:40 +08:00
parent e803274ba6
commit 8fd74db35d
2 changed files with 37 additions and 3 deletions

View File

@ -119,6 +119,39 @@ export default {
} }
</script> </script>
:::
::: title 每页数量切换事件(limit)
:::
::: demo
<template>
<lay-page :limit="limit" :total="total" @limit="limit=$event" :show-limit="showLimit" ></lay-page>
<div>每页数量:{{limit}}</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const limit = ref(5)
const total = ref(9999)
const showLimit = ref(true)
return {
limit,
total,
showLimit,
}
}
}
</script>
::: :::
::: title 完整分页 ::: title 完整分页
@ -127,7 +160,8 @@ export default {
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" :total="9999" :show-count="showCount" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page> <lay-page :limit="limit" :total="9999" :show-count="showCount" @limit="limit=$event" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
每页数量:{{limit}}
</template> </template>
<script> <script>

View File

@ -80,7 +80,7 @@ const props = withDefaults(
} }
); );
const pages = props.pages / 2 const pages = props.pages / 2
const inlimit = ref(props.limit); const inlimit = computed({ get() { return props.limit }, set(v: number) { emit('limit', v) } })
const maxPage = ref(Math.ceil(props.total / props.limit)); const maxPage = ref(Math.ceil(props.total / props.limit));
const totalPage = computed(() => { const totalPage = computed(() => {
let r: number[] = [], end = maxPage.value let r: number[] = [], end = maxPage.value
@ -99,7 +99,7 @@ const totalPage = computed(() => {
const currentPage: Ref<number> = ref(1); const currentPage: Ref<number> = ref(1);
const currentPageShow: Ref<number> = ref(currentPage.value); const currentPageShow: Ref<number> = ref(currentPage.value);
const emit = defineEmits(["jump"]); const emit = defineEmits(["jump", "limit"]);
const prev = function () { const prev = function () {
if (currentPage.value === 1) { if (currentPage.value === 1) {