分页功能

src/components/viewer/Table.vue

@@ -16,10 +16,10 @@
       </v-card-title>
 
       <!-- 表格主体 -->
-      <v-data-table calculate-widths multi-sort
+      <v-data-table calculate-widths multi-sort hide-default-footer
                     :group-by="table.groupBy" :group-desc="table.groupDesc"
                     :headers="table.headers" :items="table.data" :search="table.search" :loading="table.loading"
-                    :items-per-page="table.pageSize" :page="table.pageNum"
+                    :items-per-page="table.pageSize"
                     :sort-by="table.sortBy" :sort-desc="table.sortDesc">
         <!-- 操作区 -->
         <template v-slot:item.option="{ item }">
@@ -126,6 +126,19 @@
           </div>
         </template>
       </v-data-table>
+
+      <!-- 底部分页 -->
+      <div class="mt-2">
+        <v-row>
+          <v-col cols="2"></v-col>
+          <v-col cols="2">
+            <v-text-field type="number" required label="page" v-model="tempPage" @change="inputPageNum" />
+          </v-col>
+          <v-col cols="4">
+            <v-pagination :disabled="table.loading" :length="99" v-model="table.pageNum" @input="generateTableDataAgain"></v-pagination>
+          </v-col>
+        </v-row>
+      </div>
     </v-card>
 
     <v-dialog v-model="dialog.visible" max-width="800">
@@ -156,13 +169,15 @@ export default {
   name: 'Table',
   components: {TradeInfo},
   props: ['query', 'page', 'table'],
+  inject: ['generateTableData'],
   data: () => ({
     hashKit: HashKit,
     httpKit: HttpKit,
     dialog: {
       data: [],
       visible: false
-    }
+    },
+    tempPage: 1
   }),
   methods: {
     async deleteByHash(hash_code) {
@@ -181,6 +196,15 @@ export default {
     showTradeInfo(item) {
       this.dialog.data = item
       this.dialog.visible = true
+    },
+    async inputPageNum() {
+      console.log(typeof this.tempPage, parseInt(this.tempPage))
+      this.table.pageNum = parseInt(this.tempPage)
+      await this.generateTableDataAgain()
+    },
+    async generateTableDataAgain() {
+      this.tempPage = this.table.pageNum
+      await this.generateTableData()
     }
   }
 }