消毒历史增加前端静态分页

src/components/audit/History.vue

@@ -3,7 +3,7 @@
 import { syncSendCmd } from 'apis/system'
 import { ElLoading } from 'element-plus'
 import { FtMessage } from 'libs/message'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import HistoryDetail from '../setting/HistoryDetail.vue'
 // const settingStore = useSettingStore()
@@ -126,6 +126,17 @@ const onClose = () => {
 // const deleteBtnVisible = computed(() => {
 //   return systemStore.systemUser?.name === 'admin'
 // })
+const currentPage = ref(1)
+const pageSize = ref(9)
+const handleCurrentChange = (page: number) => {
+  currentPage.value = page
+}
+// 计算当前页数据
+const currentPageData = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return tableData.value?.slice(start, end)
+})
 </script>
 
 <template>
@@ -135,9 +146,9 @@ const onClose = () => {
       <!--      <bt-button v-if="deleteBtnVisible" type="primary" button-text="删除" @click="onDelHistory" /> -->
     </div>
     <div class="history-table">
-      <el-table :data="tableData" style="width: 100%" height="100%" @selection-change="handleSelectionChange">
+      <el-table :data="currentPageData" style="width: 100%" height="100%" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" />
-        <el-table-column type="index" label="序号" width="80" />
+        <!--        <el-table-column type="index" label="序号" width="80" /> -->
         <el-table-column prop="name" label="消毒日期" />
         <el-table-column prop="detail" label="操作" width="200">
           <template #default="scoped">
@@ -153,6 +164,15 @@ const onClose = () => {
         </el-table-column>
       </el-table>
     </div>
+    <div class="audit-pagination">
+      <el-pagination
+        layout="prev, pager, next"
+        :total="tableData.length"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        @current-change="handleCurrentChange"
+      />
+    </div>
     <ft-dialog v-model="visible" title="消毒详情" width="80vw" @cancel="onClose">
       <div>
         <HistoryDetail :data="detailData" />
@@ -176,7 +196,7 @@ const onClose = () => {
     align-items: center;
   }
   .history-table {
-    height: 73vh;
+    height: 68vh;
     overflow: auto;
   }
   .view-button,
@@ -217,4 +237,10 @@ const onClose = () => {
     color: white;
   }
 }
+.audit-pagination {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  float: right;
+}
 </style>