11/7 分页优化1.0

src/views/basic/workplace/freightManage.vue

@@ -68,16 +68,18 @@
 
             </el-table-column>
           </el-table>
-          <el-pagination
+          <div class="pagination-container">
-            style="width: 100px"
+            <el-pagination
-            small
+              small
-            @current-change="handleFreightCurrentChange"
+              @current-change="handleFreightCurrentChange"
-            :current-page.sync="query.page"
+              :current-page.sync="query.page"
-            :page-size="query.limit"
+              :page-size="query.limit"
-            layout="total,prev, pager, next"
+              layout="total,prev, pager, next"
-            :total="total"
+              :total="total"
-          >
+            >
-          </el-pagination>
+            </el-pagination>
+          </div>
+
         </el-card>
       </div>
       <div style="width: 322px;height: 340px;margin-bottom: 10px">
@@ -114,16 +116,18 @@
               </template>
             </el-table-column>
           </el-table>
-          <el-pagination
+          <div class="pagination-container">
-            style="width: 100px"
+            <el-pagination
-            small
+              small
-            @current-change="handleLayerCurrentChange"
+              @current-change="handleLayerCurrentChange"
-            :current-page.sync="LayerQuery.page"
+              :current-page.sync="LayerQuery.page"
-            :page-size="LayerQuery.limit"
+              :page-size="LayerQuery.limit"
-            layout="prev, pager, next"
+              layout="total,prev, pager, next"
-            :total="LayerTotal"
+              :total="LayerTotal"
-          >
+            >
-          </el-pagination>
+            </el-pagination>
+          </div>
+
           <!--<pagination-->
           <!--  :total="LayerTotal"-->
           <!--  :limit.sync="LayerQuery.limit"-->
@@ -161,15 +165,20 @@
               </template>
             </el-table-column>
           </el-table>
-          <el-pagination
+          <div class="pagination-container">
-            small
+            <el-pagination
-            @current-change="handleQueueCurrentChange"
+              small
-            :current-page.sync="queueQuery.page"
+              @current-change="handleQueueCurrentChange"
-            :page-size="queueQuery.limit"
+              :current-page.sync="queueQuery.page"
-            layout="prev, pager, next"
+              :page-size="queueQuery.limit"
-            :total="queueTotal"
+              layout="total,prev, pager, next"
-          >
+              :total="queueTotal"
-          </el-pagination>
+            >
+            </el-pagination>
+
+          </div>
+
+
           <!--<el-pagination-->
           <!--  layout="prev, pager, next"-->
           <!--  style="float: right"-->
@@ -219,7 +228,7 @@ export default {
     return {
       query: {
         page: 1,
-        limit: 4,
+        limit: 5,
         workPlaceIdFk: '',
         key: ''
         // code: null,
@@ -273,14 +282,17 @@ export default {
       getLayerList(this.LayerQuery).then(res => {
         if (res.code == 20000) {
           this.layerList = res.data.list || []
+          this.LayerTotal = res.data.total
           if (this.layerList.length == 0) {
             this.queueList = []
+            this.queueTotal = 0
           } else {
             this.queueQuery.layerCode = ''
             this.queueQuery.layerCodes = this.layerList.map(item => item.code)
             this.getQueues()
           }
         } else {
+          this.LayerTotal = 0
           this.layerList = []
         }
       })
@@ -394,5 +406,8 @@ export default {
 </script>
 
 <style scoped>
-
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>