feat: 更新 EditableGrid 元件以支持分頁功能並改善顯示資訊

src/components/maint/EditableGrid.vue

@@ -85,15 +85,16 @@
 
         <div ref="tableContainerRef">
           <v-data-table
+            v-model:page="currentPage"
+            class="student-table"
             density="comfortable"
             fixed-header
             :headers="tableHeaders"
             :height="tableHeight"
+            hide-default-footer
             item-value="id"
             :items="filteredStudents"
-            :items-per-page="10"
-            items-per-page-text="每頁筆數"
-            page-text="第 {0}-{1} 筆 / 共 {2} 筆"
+            :items-per-page="itemsPerPage"
           >
             <template #[`header.select`]>
               <v-checkbox-btn
@@ -295,6 +296,48 @@
                 </v-btn>
               </div>
             </template>
+            <template #bottom>
+              <div class="d-flex align-center justify-space-between px-4 py-3">
+                <div class="text-body-2 text-medium-emphasis">
+                  {{ pageSummary }}
+                </div>
+                <div class="d-flex align-center ga-2">
+                  <v-btn
+                    :disabled="currentPage <= 1"
+                    size="small"
+                    variant="text"
+                    @click="currentPage = 1"
+                  >
+                    第一頁
+                  </v-btn>
+                  <v-btn
+                    :disabled="currentPage <= 1"
+                    size="small"
+                    variant="text"
+                    @click="currentPage -= 1"
+                  >
+                    上一頁
+                  </v-btn>
+                  <span class="text-body-2">{{ currentPage }} / {{ pageCount }}</span>
+                  <v-btn
+                    :disabled="currentPage >= pageCount"
+                    size="small"
+                    variant="text"
+                    @click="currentPage += 1"
+                  >
+                    下一頁
+                  </v-btn>
+                  <v-btn
+                    :disabled="currentPage >= pageCount"
+                    size="small"
+                    variant="text"
+                    @click="currentPage = pageCount"
+                  >
+                    最後頁
+                  </v-btn>
+                </div>
+              </div>
+            </template>
           </v-data-table>
         </div>
       </v-card-text>
@@ -330,7 +373,7 @@
 
 <script setup lang="ts">
 import { mdiContentSave, mdiDelete, mdiMagnify, mdiRestore } from '@mdi/js'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import ConfirmDialog from '@/components/maint/CommonConfirmDialog.vue'
 import { useEditableStudentGrid } from '@/composables/maint/useEditableStudentGrid'
 
@@ -360,6 +403,18 @@ const {
   resetAllRows,
 } = useEditableStudentGrid()
 
+const itemsPerPage = 10
+const currentPage = ref(1)
+const pageCount = computed(() => Math.max(1, Math.ceil(filteredStudents.value.length / itemsPerPage)))
+const pageSummary = computed(() => {
+  const total = filteredStudents.value.length
+  if (total === 0) return '第 0-0 筆 / 共 0 筆'
+
+  const start = (currentPage.value - 1) * itemsPerPage + 1
+  const end = Math.min(currentPage.value * itemsPerPage, total)
+  return `第 ${start}-${end} 筆 / 共 ${total} 筆`
+})
+
 const confirmDeleteSingleVisible = ref(false)
 const confirmDeleteSelectedVisible = ref(false)
 const confirmSaveVisible = ref(false)
@@ -383,6 +438,12 @@ const selectedDeleteMessage = computed(
     `確定要刪除目前選取的 ${selectedRowIds.value.length} 筆資料嗎？此操作會在儲存後正式生效。`
 )
 
+watch(pageCount, (value) => {
+  if (currentPage.value > value) {
+    currentPage.value = value
+  }
+})
+
 function requestDeleteSingleRow(id: number) {
   pendingDeleteRowId.value = id
   confirmDeleteSingleVisible.value = true
@@ -427,8 +488,4 @@ function confirmSaveAllRows() {
   padding-bottom: 0 !important;
   min-height: 32px;
 }
-
-:deep(.v-data-table-footer) {
-  padding: 4px 0 0;
-}
 </style>