แก้ไข paging สรรหา > รายชื่อคัดเลือก

This commit is contained in:
Warunee Tamkoo 2023-10-27 11:01:13 +07:00
parent 0939d490df
commit 5d361bcbfc
2 changed files with 25 additions and 18 deletions

View file

@ -67,8 +67,10 @@
<q-space />
<div class="items-center gt-xs" style="display: flex">
<!-- นหาขอความใน table -->
<q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined
debounce="300" placeholder="ค้นหา" style="max-width: 200px" class="q-ml-sm">
<!-- @keydown.enter.prevent:model-value="updateInput" -->
<q-input :model-value="inputfilter" @keydown.enter.prevent="submitInput" @update:model-value="updateInput"
ref="filterRef" standout dense outlined debounce="300" placeholder="ค้นหา" style="max-width: 200px"
class="q-ml-sm">
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
@ -84,10 +86,11 @@
<q-table ref="table" flat bordered class="custom-header-table" v-bind="attrs" virtual-scroll
:virtual-scroll-sticky-size-start="48" dense :pagination="initialPagination"
:rows-per-page-options="paging == true ? [25, 50, 100, 500] : []" row-key="id" selection="multiple"
v-model:selected="selected" @update:pagination="updatePagination">
v-model:selected="selected" @update:pagination="updatePagination" :filter="false">
<template v-slot:pagination="scope">
งหมด {{ props.total }} รายการ
<q-pagination v-model="currentPage" active-color="primary" color="dark" :max-pages="5" size="sm" boundary-links direction-links :max="props.maxPage < 1 ? 1 : props.maxPage"></q-pagination>
<q-pagination v-model="currentPage" active-color="primary" color="dark" :max-pages="5" size="sm" boundary-links
direction-links :max="props.maxPage < 1 ? 1 : props.maxPage"></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
@ -238,6 +241,7 @@ const props = defineProps({
// Pagination - page & change page & get new data
const currentPage = ref<number>(1)
watch(currentPage, () => {
console.log(currentPage.value)
props.changePage(currentPage.value, props.pageSize, true);
});
@ -265,13 +269,16 @@ const emit = defineEmits([
const updateInput = async (value: any) => {
await emit("update:inputfilter", value);
};
// search & get new data by keyword
if (value.length > 3) {
// search & get new data by keyword
const submitInput = () => {
setTimeout(() => {
props.changePage(1, props.pageSize);
currentPage.value = 1
}
}, 500);
};
const updateVisible = (value: any) => {
emit("update:inputvisible", value);
};