优化分页组件props

@@ -5,6 +5,7 @@
       layout="total, prev, pager, next, sizes, jumper"
       :total="pagination.total"
       :current-page.sync="pagination.page"
+      :page-size.sync="pagination.size"
       @current-change="handleCurrentChange"
       @size-change="handleSizeChange"
     ></el-pagination>
@@ -14,38 +15,17 @@
 <script>
 export default {
   props: {
-    total: {
-      type: Number,
-      default: 0
+    pagination: {
+      type: Object,
+      default: () => ({ size: 10, total: 0, page: 1 })
     }
   },
-  data() {
-    return {
-      pagination: {
-        size: 10,
-        total: this.total,
-        page: 1
-      }
-    }
-  },
-  watch: {
-    total(val) {
-      this.pagination.total = val
-    }
-  },
-  mounted() {
-    this.$emit('pager', { ...this.pagination })
-  },
   methods: {
-    changeCurrentSize(page) {
-      this.pagination.page = page
-      this.handleCurrentChange(page)
-    },
     handleCurrentChange(page) {
-      this.$emit('pager', { ...this.pagination, page })
+      this.$emit('pagination', { ...this.pagination, page })
     },
     handleSizeChange(size) {
-      this.$emit('pager', { ...this.pagination, size })
+      this.$emit('pagination', { ...this.pagination, size })
     }
   }
 }

@@ -103,11 +103,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <FooterPaginationfrom
-      ref="paginationRef"
-      :total="total"
-      @pager="handleGetPager"
-    ></FooterPaginationfrom>
+    <FooterPaginationfrom :pagination="pagination"></FooterPaginationfrom>
   </Card>
 </template>
 
@@ -132,14 +128,25 @@ export default {
         times: ['', '']
       },
       tableData: [],
-      pagination: null,
-      loading: false,
-      total: 0
+      pagination: { size: 10, total: 0, page: 1 },
+      loading: false
     }
   },
+  watch: {
+    'pagination.size'() {
+      this.handleGetResourceMonitorList()
+    },
+    'pagination.page'() {
+      this.handleGetResourceMonitorList()
+    }
+  },
+  mounted() {
+    this.handleGetResourceMonitorList()
+  },
   methods: {
     async handleGetResourceMonitorList() {
       try {
+        this.loading = true
         const {
           result: { list, total }
         } = await getResourceMonitorList({
@@ -151,14 +158,19 @@ export default {
           row: this.pagination.size
         })
         this.tableData = list
-        this.total = total
+        this.pagination.total = total
       } catch (error) {
         console.log(error)
+      } finally {
+        this.loading = false
       }
     },
     submit() {
-      // 会触发pager事件
-      this.$refs.paginationRef.changeCurrentSize(1)
+      if (this.pagination.page === 1) {
+        this.handleGetResourceMonitorList()
+      } else {
+        this.pagination.page = 1
+      }
     },
     onReset() {
       this.ruleForm = {
@@ -168,20 +180,6 @@ export default {
       }
       this.submit()
     },
-    handleGetPager(data) {
-      this.pagination = data
-      this.handleQueryOrderList()
-    },
-    async handleQueryOrderList() {
-      try {
-        this.loading = true
-        await this.handleGetResourceMonitorList()
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.loading = false
-      }
-    },
     handleDetail(row) {
       this.$router.push({
         path: 'monitor-details',