(component): 优化 page 组件 limit 逻辑

This commit is contained in:
就眠儀式 2022-09-25 22:58:42 +08:00
parent dd86a40766
commit 68e754dc84
2 changed files with 57 additions and 25 deletions

View File

@ -58,12 +58,7 @@ watch(
const totalPage = computed(() => { const totalPage = computed(() => {
maxPage.value = Math.ceil(props.total / inlimit.value); maxPage.value = Math.ceil(props.total / inlimit.value);
let r: number[] = []; let r: number[] = [];
let start = let start = maxPage.value <= props.pages ? 1 : currentPage.value > pages ? currentPage.value - pages : 1;
maxPage.value <= props.pages
? 1
: currentPage.value > pages
? currentPage.value - pages
: 1;
for (let i = start; ; i++) { for (let i = start; ; i++) {
if (r.length >= props.pages || i > maxPage.value) { if (r.length >= props.pages || i > maxPage.value) {
break; break;
@ -102,7 +97,10 @@ const jumpPage = () => {
}; };
const changelimit = () => { const changelimit = () => {
currentPage.value = 1; const maxPage = Math.ceil(props.total / inlimit.value);
if(currentPage.value > maxPage ) {
currentPage.value = maxPage;
}
emit("change", { current: currentPage.value, limit: inlimit.value }); emit("change", { current: currentPage.value, limit: inlimit.value });
}; };

View File

@ -15,7 +15,7 @@ import {
onMounted, onMounted,
VNode, VNode,
Component, Component,
watch watch,
} from "vue"; } from "vue";
import LayInput from "../input/index.vue"; import LayInput from "../input/index.vue";
import LayTagInput from "../tagInput/index.vue"; import LayTagInput from "../tagInput/index.vue";
@ -65,16 +65,19 @@ onMounted(() => {
} }
Object.assign(options.value, props.items); Object.assign(options.value, props.items);
watch(selectedValue, () => { watch(
selectedValue,
() => {
if (multiple.value) { if (multiple.value) {
// tag-input // tag-input
} else { } else {
singleLabel.value = options.value.find((item: any) => { singleLabel.value = options.value.find((item: any) => {
return item.value === selectedValue.value; return item.value === selectedValue.value;
})?.label; })?.label;
} }
}, { immediate: true }) },
{ immediate: true }
);
}); });
const getOption = function (nodes: VNode[]) { const getOption = function (nodes: VNode[]) {
@ -111,24 +114,55 @@ provide("multiple", multiple);
<template> <template>
<div class="layui-select"> <div class="layui-select">
<lay-dropdown :disabled="disabled" :update-at-scroll="true" @show="openState = true" @hide="openState = false"> <lay-dropdown
<lay-tag-input v-if="multiple" v-model="selectedValue" :allow-clear="allowClear" :disabledInput="true"> :disabled="disabled"
:update-at-scroll="true"
@show="openState = true"
@hide="openState = false"
>
<lay-tag-input
v-if="multiple"
v-model="selectedValue"
:allow-clear="allowClear"
:disabledInput="true"
>
<template #suffix> <template #suffix>
<lay-icon type="layui-icon-triangle-d" :class="{ 'triangle': openState }"></lay-icon> <lay-icon
type="layui-icon-triangle-d"
:class="{ triangle: openState }"
></lay-icon>
</template> </template>
</lay-tag-input> </lay-tag-input>
<lay-input v-else v-model="singleLabel" :placeholder="placeholder" :allow-clear="allowClear" :readonly="true"> <lay-input
v-else
v-model="singleLabel"
:placeholder="placeholder"
:allow-clear="allowClear"
:readonly="true"
>
<template #suffix> <template #suffix>
<lay-icon type="layui-icon-triangle-d" :class="{ 'triangle': openState }"></lay-icon> <lay-icon
type="layui-icon-triangle-d"
:class="{ triangle: openState }"
></lay-icon>
</template> </template>
</lay-input> </lay-input>
<template #content> <template #content>
<dl class="layui-select-options"> <dl class="layui-select-options">
<div class="layui-select-search" v-if="multiple"> <div class="layui-select-search" v-if="multiple">
<lay-input v-model="searchValue" prefix-icon="layui-icon-search" placeholder="请搜索" size="sm"></lay-input> <lay-input
v-model="searchValue"
prefix-icon="layui-icon-search"
placeholder="请搜索"
size="sm"
></lay-input>
</div> </div>
<template v-if="items"> <template v-if="items">
<lay-select-option v-for="(item, index) in items" v-bind="item" :key="index"></lay-select-option> <lay-select-option
v-for="(item, index) in items"
v-bind="item"
:key="index"
></lay-select-option>
</template> </template>
<slot></slot> <slot></slot>
</dl> </dl>