统一分页样式

src/views/webSiteManagement/bannerSetting/index.vue

@@ -56,11 +56,20 @@
       <!-- 分页 -->
       <div class="page-foot">
         <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="currentChange"
+          :current-page.sync="listQuery.page"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+        <!-- <el-pagination
           background
           layout="prev, pager, next"
           :page-size="listQuery.limit"
           :total="total" @current-change="currentChange">
-        </el-pagination>
+        </el-pagination> -->
       </div>
 
       <!-- 使用图片查看器预览当前缩略图 -->
@@ -140,6 +149,11 @@ export default {
     this.getList()//获取数据
   },
   methods: {
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+
+      this.getList();
+    },
     closePreview() {
       this.currentIcon.showPreview = false;
     },
@@ -180,27 +194,6 @@ export default {
       }
       this.getList()
     },
-    // //清除搜索
-    // filterData() {
-    //   if (this.searchForm.status === 0 && this.searchForm.title === '') {
-    //     this.list = this.data;
-    //     return ;
-    //   }
-    //   let temp = this.data.filter(v => this.searchForm.status === 0 ? true: !!(this.searchForm.status === v.status))
-    //   if (!!this.searchForm.title) {
-    //     temp = temp.filter(v => v.title.includes(this.searchForm.title))
-    //   }
-
-    //   this.list = temp
-    // },
-    // //清除搜索
-    // clearFilterData() {
-    //   this.searchForm = {
-    //     status: 0,
-    //     title: ""
-    //   }
-    //   this.list = this.data;
-    // },
     //切换页码
     currentChange(val) {
       this.listQuery.page = val;
@@ -210,14 +203,7 @@ export default {
     edit(row) {
       this.dialogTitle = "编辑banner";
       this.formObject.formVal = this.filterParams(row)
-      // this.formObject = {
-      //   formVal: this.filterParams(row),
-      //   rules: this.formObject.rules,//表单规则
-      //   formItem: banner.formInfo,//表单项。
-      // }
       this.dialogVisible = true;
-
-      // console.log(this.formObject.formVal)
     },
     closeDialog() {
       this.$bus.$emit('upload-clearFiles')
@@ -245,24 +231,6 @@ export default {
       this.formObject.formVal = banner.init();
 
     },
-    // //打开弹窗
-    // onOpen() {
-    //   this.$nextTick(() => {
-    //     this.formObject = {
-    //       formVal: {
-    //         title: "",
-    //         cover: "",
-    //         rank: "",
-    //         url: "",
-    //         status: 1,
-    //         jumpType: 0,
-    //         jumpId: '',
-    //       },
-    //       rules: this.formObject.rules,//表单规则
-    //       formItem: banner.formInfo,//表单项。
-    //     }
-    //   })
-    // },
     filterParams(row) {
       let a = {};
       for (let i in this.formObject.formVal) {
@@ -329,8 +297,6 @@ export default {
   cursor: pointer;
 }
 .page-foot {
-  display: flex;
-  justify-content: center;
   margin-top: 20px;
 }
 </style>

src/views/webSiteManagement/imageLibrary/list.vue

@@ -48,12 +48,21 @@
 
       <div class="page-foot">
         <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="currentChange"
+          :current-page.sync="listQuery.page"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="~~total">
+        </el-pagination>
+        <!-- <el-pagination
           background
           layout="prev, pager, next"
           :total="~~total"
           :current-page="listQuery.page"
           @current-change="currentChange">
-        </el-pagination>
+        </el-pagination> -->
       </div>
 
     </div>
@@ -106,6 +115,11 @@ export default {
     this.getList()
   },
   methods: {
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+
+      this.getList();
+    },
     changePageInfo(page) {
       // this.listQuery = page;
       this.$emit('recordPageInfo', page)
@@ -244,8 +258,6 @@ export default {
   height: auto;
 }
 .page-foot {
-  display: flex;
-  justify-content: center;
   margin-top: 20px;
 }
 </style>

src/views/webSiteManagement/satelliteIntroduction/list.vue

@@ -52,12 +52,21 @@
       />
       <div class="page-foot">
         <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="currentChange"
+          :current-page.sync="listQuery.page"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="listQuery.limit"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="~~total">
+        </el-pagination>
+        <!-- <el-pagination
           background
           layout="prev, pager, next"
           :page-size="listQuery.limit"
           :current-page="listQuery.page"
           :total="total" @current-change="currentChange">
-        </el-pagination>
+        </el-pagination> -->
       </div>
     </div>
 
@@ -109,6 +118,11 @@ export default {
     this.getList()
   },
   methods: {
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+
+      this.getList();
+    },
     showPreview(url) {
       this.currentIcon.url = url;
       this.currentIcon.showPreview = true;
@@ -246,8 +260,6 @@ export default {
   cursor: pointer;
 }
 .page-foot {
-  display: flex;
-  justify-content: center;
   margin-top: 20px;
 }
 </style>