法律法规，频发问题分页组件

src/components/map/MapHolder.vue

@@ -73,7 +73,7 @@ export default {
           // 法律法规点击事件
           if ($(`#${str}_id a`)) {
             $(`#${str}_id a`).click((e) => {
-              console.log(e, "a label");
+              console.log(e, "显示疑点相关的弹窗");
             });
           }
           // input添加点击事件

src/views/FrequencyView.vue

@@ -62,12 +62,15 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="footer"></div>
+      <div class="footer">
+        <Pagination class="pagination-style" :paginationData="paginationData" />
+      </div>
     </div>
   </div>
 </template>
 <script>
 import NewSelect from "@/components/common/NewSelect.vue";
+import Pagination from "@/components/common/Pagination.vue";
 /**
  * 频发问题 dialog -- 智能辅助
  * @author: Gao Lu
@@ -75,7 +78,7 @@ import NewSelect from "@/components/common/NewSelect.vue";
  */
 export default {
   name: "FrequencyDialog",
-  components: { NewSelect },
+  components: { NewSelect, Pagination },
   data() {
     return {
       typeSelectVal: "土地资源",
@@ -134,6 +137,19 @@ export default {
           problemNature: "环保督察问题整改落实不力",
         },
       ],
+      paginationData: {
+        pageSize: 0,
+        pagerCount: 7,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 50],
+        total: 200,
+        currentChange: (val) => {
+          this.handleCurrentChange(val);
+        },
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
+        },
+      },
     };
   },
   methods: {
@@ -143,6 +159,15 @@ export default {
     resetEvent() {
       console.log("重置");
     },
+    // 切换页
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.paginationData.currentPage = val;
+    },
+    // 切换条数
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
   },
 };
 </script>
@@ -241,7 +266,11 @@ export default {
     .footer {
       height: 10%;
       width: 100%;
-      background: palevioletred;
+      position: absolute;
+      .pagination-style {
+        position: absolute;
+        right: 50px;
+      }
     }
   }
 }

src/views/LawView.vue

@@ -54,12 +54,15 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="footer"></div>
+      <div class="footer">
+        <Pagination class="pagination-style" :paginationData="paginationData" />
+      </div>
     </div>
   </div>
 </template>
 <script>
 import NewSelect from "@/components/common/NewSelect.vue";
+import Pagination from "@/components/common/Pagination.vue";
 /**
  * 法律法规 页面 -- 智能辅助，疑点相关的法律法规
  * @author: Gao Lu
@@ -67,7 +70,7 @@ import NewSelect from "@/components/common/NewSelect.vue";
  */
 export default {
   name: "LawView",
-  components: { NewSelect },
+  components: { NewSelect, Pagination },
   data() {
     return {
       searchInput: "",
@@ -122,6 +125,19 @@ export default {
           date: "2018.12.12",
         },
       ],
+      paginationData: {
+        pageSize: 0,
+        pagerCount: 7,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 50],
+        total: 200,
+        currentChange: (val) => {
+          this.handleCurrentChange(val);
+        },
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
+        },
+      },
     };
   },
   methods: {
@@ -131,6 +147,15 @@ export default {
     resetEvent() {
       console.log("重置");
     },
+    // 切换页
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.paginationData.currentPage = val;
+    },
+    // 切换条数
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
   },
 };
 </script>
@@ -233,9 +258,8 @@ export default {
       }
     }
     .footer {
-      height: 10%;
-      width: 100%;
-      background: palevioletred;
+      position: absolute;
+      right: 50px;
     }
   }
 }