修改屏蔽 分页

src/views/education/item-shield.vue

@@ -6,7 +6,7 @@
         <el-radio-button label="1">屏蔽机构</el-radio-button>
         <el-radio-button label="2">屏蔽人员</el-radio-button>
       </el-radio-group>
-      <el-button class="complete" type="primary" size="small">完成</el-button>
+      <el-button class="complete" type="primary" size="small" @click="complete">完成</el-button>
       <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
         <el-form :model="formInline" ref="formInline" label-width="75px" class="form-inline">
           <el-col :span="6">
@@ -56,6 +56,18 @@
           </template>
         </el-table-column>
       </el-table>
+      <div class="pagination">
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="formInline.pageNo"
+          :page-sizes="[10, 20, 30, 100]"
+          :page-size="formInline.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalRows"
+        ></el-pagination>
+      </div>
     </div>
   </div>
 </template>
@@ -91,7 +103,8 @@ export default {
           value: 1
         }
       ],
-      tableData: []
+      tableData: [],
+      totalRows: 0,
     };
   },
   computed: {
@@ -141,15 +154,6 @@ export default {
     }
   },
   destroyed() {
-    // console.log(this);
-    // const answer = window.confirm(
-    //   "Do you really want to leave? you have unsaved changes!"
-    // );
-    // if (answer) {
-    //   next();
-    // } else {
-    //   next(false);
-    // }
   },
   methods: {
     searchList() {
@@ -177,6 +181,18 @@ export default {
     changeType(value) {
       console.log(value);
     },
+    complete() {
+      console.log('完成');
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.formInline.pageSize = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.formInline.pageNo = val;
+      this.search();
+    },
   }
 };
 </script>