theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[修复] 分页组件中的最大页码数量计算时机导致的显示问题

Browse Source
This commit is contained in:
castleiMac 2022-01-08 11:24:17 +08:00
parent 3b337aeba1
commit 797e24ee16
2 changed files with 64 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
example/docs/zh-CN/components/page.md
View File

@ -7,7 +7,7 @@
::: demo
<template>
<lay-page :limit="limit" :total="total" :show-page="showPage"></lay-page>
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage"></lay-page>
</template>
<script>
@ -37,7 +37,7 @@ export default {
::: demo
<template>
<lay-page :limit="limit" :total="total"></lay-page>
<lay-page :limit="limit" @limit="limit = $event" :total="total"></lay-page>
</template>
<script>
@ -65,7 +65,7 @@ export default {
::: demo
<template>
<lay-page :limit="limit" :total="total">
<lay-page :limit="limit" @limit="limit = $event" :total="total">
<template v-slot:prev>上</template>
<template v-slot:next>下</template>
</lay-page>
@ -96,11 +96,11 @@ export default {
::: demo
<template>
<lay-page :limit="limit" :total="total" :show-page="showPage" theme="red"></lay-page>
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="red"></lay-page>
<br>
<lay-page :limit="limit" :total="total" :show-page="showPage" theme="blue"></lay-page>
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="blue"></lay-page>
<br>
<lay-page :limit="limit" :total="total" :show-page="showPage" theme="orange"></lay-page>
<lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="orange"></lay-page>
</template>
<script>
@ -124,7 +124,7 @@ export default {
:::
::: title 完整分页
::: title 指定分页容量
:::
::: demo
@ -222,13 +222,13 @@ export default {
:::
::: title 切换事件
::: title 页码切换事件(jump)
:::
::: demo
<template>
<lay-page :limit="limit" :total="total" @jump="jump" :show-page="showSkip"></lay-page>
<lay-page :limit="limit" :total="total" @jump="jump" @limit="limit = $event" :show-page="showSkip"></lay-page>
</template>
<script>
@ -270,6 +270,8 @@ export default {
| showLimit | 显示每页数量 | `false` |
| showRefresh | 显示刷新按钮 | `false` |
| showSkip | 显示跳转 | `false` |
| pages | 显示切页按钮数量 | `10` |
| limits | 切换每页数量的选择项 | `[10,20,30,40,50]` |
:::
@ -281,6 +283,7 @@ export default {
| 事件 | 描述 | 参数 |
| ---- | -------- | --------------------- |
| jump | 切换回调 | { current: 当前页面 } |
| limit | 每页数量变化 | 变化后的值 |
:::

98
src/module/page/index.vue
View File

@ -1,77 +1,77 @@
<template>
<div class="layui-box layui-laypage layui-laypage-default">
<span v-if="showCount" class="layui-laypage-count"
>共 {{ total }} 条 {{}} 页</span
><a
>共 {{ total }} 条 {{ maxPage }} 页</span
>
<a
href="javascript:;"
class="layui-laypage-prev"
:class="[currentPage === 1 ? 'layui-disabled' : '']"
@click="prev()"
><slot v-if="slots.prev" name="prev"></slot>
<template v-else>上一页</template></a
>
<slot v-if="slots.prev" name="prev"></slot>
<template v-else>上一页</template>
</a>
<template v-if="showPage">
<template v-for="index of totalPage" :key="index">
<span v-if="index === currentPage" class="layui-laypage-curr"
><em
<span v-if="index === currentPage" class="layui-laypage-curr">
<em
class="layui-laypage-em"
:class="[theme ? 'layui-bg-' + theme : '']"
></em
><em>{{ index }}</em></span
>
<a v-else href="javascript:;" @click="jump(index)">
{{ index }}
</a>
></em>
<em>{{ index }}</em>
</span>
<a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
</template>
</template>
<a
href="javascript:;"
class="layui-laypage-next"
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
:class="[currentPage === maxPage ? 'layui-disabled' : '']"
@click="next()"
><slot v-if="slots.next" name="next"></slot>
<template v-else>下一页</template></a
><span v-if="showLimit" class="layui-laypage-limits"
><select v-model="inlimit">
<option value="10">10 条/页</option>
<option value="20">20 条/页</option>
<option value="30">30 条/页</option>
<option value="40">40 条/页</option>
<option value="50">50 条/页</option>
</select></span
><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
><i class="layui-icon layui-icon-refresh"></i></a
><span v-if="showSkip" class="layui-laypage-skip"
>到第<input
>
<slot v-if="slots.next" name="next"></slot>
<template v-else>下一页</template>
</a>
<span v-if="showLimit" class="layui-laypage-limits">
<select v-model="inlimit">
<option v-for="val of limits" :key="val" :value="val">
{{ val }} 条/页
</option>
</select>
</span>
<a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
<i class="layui-icon layui-icon-refresh"></i>
</a>
<span v-if="showSkip" class="layui-laypage-skip">
到第
<input
v-model="currentPageShow"
type="number"
class="layui-input layui-input-number"
/>页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
/>页
<button
type="button"
class="layui-laypage-btn"
@click="jumpPage()"
:disabled="currentPageShow > maxPage"
>
确定
</button></span
>
</button>
</span>
</div>
</template>
<script setup name="LayPage" lang="ts">
import {
defineProps,
Ref,
ref,
watch,
useSlots,
computed,
ComputedRef,
} from "vue";
import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";
const slots = useSlots();
const props = withDefaults(
defineProps<{
total: number;
limit?: number;
pages?: number;
limit: number;
theme?: string;
showPage?: boolean | string;
showSkip?: boolean | string;
@ -79,10 +79,11 @@ const props = withDefaults(
showLimit?: boolean | string;
showInput?: boolean | string;
showRefresh?: boolean | string;
pages?: number;
limits?: number[];
}>(),
{
limit: 10,
pages: 10,
theme: "green",
showPage: false,
showSkip: false,
@ -90,8 +91,11 @@ const props = withDefaults(
showLimit: true,
showInput: false,
showRefresh: false,
pages: 10,
limits: () => [10, 20, 30, 40, 50],
}
);
const limits = ref(props.limits);
const pages = props.pages / 2;
const inlimit = computed({
get() {
@ -101,8 +105,9 @@ const inlimit = computed({
emit("limit", v);
},
});
const maxPage = ref(Math.ceil(props.total / props.limit));
const maxPage = ref(0);
const totalPage = computed(() => {
maxPage.value = Math.ceil(props.total / props.limit);
let r: number[] = [],
start =
maxPage.value <= props.pages
@ -120,6 +125,7 @@ const totalPage = computed(() => {
});
const currentPage: Ref<number> = ref(1);
const currentPageShow: Ref<number> = ref(currentPage.value);
const emit = defineEmits(["jump", "limit"]);
const prev = function () {
@ -130,7 +136,7 @@ const prev = function () {
};
const next = function () {
if (currentPage.value === totalPage.value[totalPage.value.length - 1]) {
if (currentPage.value === maxPage.value) {
return;
}
currentPage.value++;
@ -146,11 +152,11 @@ const jumpPage = function () {
watch(inlimit, function () {
currentPage.value = 1;
// totalPage.value = Math.ceil(props.total / inlimit.value);
// maxPage.value = Math.ceil(props.total / inlimit.value);
});
watch(currentPage, function () {
currentPageShow.value = currentPage.value;
emit("jump", { current: currentPage.value });
});
</script>
</script>