新增 未拍照通知分页

src/components/Header.vue

@@ -26,11 +26,19 @@
       <div class="quit" @click="quit">[退出]</div>
     </div>
     <el-dialog v-model="dialogVisible" title="拍照通知" width="30%">
-      <el-table :data="isNewMessage" border>
+      <el-table :data="tableData[currentTableIndex - 1]" border>
         <el-table-column align="center" type="index" />
         <el-table-column align="center" property="shipName" label="船名" />
         <el-table-column align="center" property="status" label="状态" />
       </el-table>
+      <el-pagination
+        style="text-align: right; margin-top: 20px"
+        @current-change="pageChange"
+        background
+        layout="prev, pager, next"
+        :total="total"
+      >
+      </el-pagination>
       <template #footer>
         <span class="dialog-footer">
           <el-button type="primary" @click="dialogVisible = false">
@@ -79,6 +87,21 @@ export default {
       let t22 = t2.getTime();
       return t00 > t11 && t00 < t22;
     }
+    function spArr(arr, num) {
+      //arr是你要分割的数组，num是以几个为一组
+      let newArr = []; //首先创建一个新的空数组。用来存放分割好的数组
+      for (let i = 0; i < arr.length; ) {
+        //注意：这里与for循环不太一样的是，没有i++
+        newArr.push(arr.slice(i, (i += num)));
+      }
+      return newArr;
+    }
+    let tableData = ref([]);
+    let currentTableIndex = ref(1);
+    let total = ref(0);
+    function pageChange(c) {
+      currentTableIndex.value = c;
+    }
     async function getUnphotographNotice() {
       console.log("heart");
       let { data } = await api.getUnphotographNotice();
@@ -89,6 +112,8 @@ export default {
             status: "未拍照",
           });
         }
+        total.value = isNewMessage.value.length;
+        tableData.value = spArr(isNewMessage.value, 10);
       } else {
         isNewMessage.value = 0;
       }
@@ -108,7 +133,11 @@ export default {
       quit,
       userName,
       isNewMessage,
+      tableData,
       dialogVisible,
+      currentTableIndex,
+      total,
+      pageChange,
     };
   },
 };