no message

src/modules/15_development/components/history/DialogGov.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed,reactive } from "vue";
 import Header from "@/components/DialogHeader.vue";
-import type { DataOption,FormFilter } from "@/modules/15_development/interface/index/Main";
+import type { DataOption,FormFilter,NewPagination } from "@/modules/15_development/interface/index/Main";
 import { useDevelopmentDataStoreHistory } from "@/modules/15_development/store/developmentStoreHistory";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -33,7 +33,7 @@ const formFilter = reactive<FormFilter>({
 
 const pagination = ref({
   page: 1,
-  rowsPerPage: 10,
+  rowsPerPage: 20,
 });
 
 const $q = useQuasar();
@@ -143,11 +143,28 @@ function searchFilter() {
       hideLoader();
     });
 }
+
+function updatePage(val:number){
+  formFilter.page = val;
+  searchFilter();
+}
+
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    searchFilter();
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 60%">
-      <Header :tittle="'เลือกข้าราชการ'" :close="closeDialog" />
+      <Header :tittle="'เลือกข้าราชการฯ'" :close="closeDialog" />
       <q-separator />
 
       <q-card-section>
@@ -180,7 +197,7 @@ function searchFilter() {
           <div class="col-2">
             <q-btn
               label="ค้นหา"
-              class="full-width full-height"
+              class="full-width"
               unelevated
               color="teal"
               @click="searchFilter()"
@@ -205,7 +222,8 @@ function searchFilter() {
             class="custom-header-table"
             :visible-columns="store.visibleColumns"
             v-model:pagination="pagination"
-            :rows-per-page-options="[10, 25, 50, 100]"
+            :rows-per-page-options="[20, 25, 50, 100]"
+            @update:pagination="updatePageSize"
           >
             <template v-slot:pagination="scope">
               <q-pagination
@@ -217,6 +235,7 @@ function searchFilter() {
                 size="sm"
                 boundary-links
                 direction-links
+                @update:model-value="updatePage"
               ></q-pagination>
             </template>
             <template v-slot:header="props">