✨(component): 优化 page 组件 limit 逻辑
This commit is contained in:
parent
dd86a40766
commit
68e754dc84
@ -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 });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user