app/pages/support/documents.vue

@@ -15,7 +15,16 @@
           :product-type-options="productTypeOptions"
           :product-options="productOptions"
         />
-        <document-list :documents="filteredDocuments" />
+        <!-- <document-list :documents="filteredDocuments" /> -->
+        <document-list :documents="paginatedDocuments" />
+        <el-pagination
+          v-model:current-page="page"
+          class="justify-center pagination-container"
+          layout="prev, pager, next"
+          hide-on-single-page
+          :page-size="10"
+          :total="filteredDocuments.length"
+        />
       </div>
     </div>
   </div>
@@ -35,6 +44,9 @@
     keyword: '',
   });
 
+  const page = ref(1);
+  const documentsPerPage = 10;
+
   const { data: documents, pending, error } = await useDocumentList();
 
   const productTypeOptions = computed(() => {
@@ -92,6 +104,13 @@
     });
   });
 
+  const paginatedDocuments = computed(() => {
+    return filteredDocuments.value.slice(
+      (page.value - 1) * documentsPerPage,
+      page.value * documentsPerPage
+    );
+  });
+
   watch(
     () => filters.selectedType,
     () => {
@@ -153,4 +172,35 @@
     height: 40px;
     font-size: 0.9rem;
   }
+
+  .pagination-container {
+    margin-top: 2rem;
+  }
+
+  :deep(.el-pagination) {
+    .btn-prev,
+    .btn-next {
+      .el-icon {
+        font-size: 24px;
+      }
+    }
+
+    .el-pager {
+      gap: 0.5rem;
+    }
+    .el-pager li {
+      font-size: 1rem;
+      /* border: 1px solid #409eff; */
+      border-radius: 50%;
+
+      &:hover {
+        background-color: #ecf5ff;
+      }
+
+      &.is-active {
+        background-color: var(--el-color-primary);
+        color: #fff;
+      }
+    }
+  }
 </style>