修改店铺商品分页

src/views/shop/shop/components/commodity.vue

@@ -74,6 +74,16 @@
 				</template>
 			</el-table-column>
 		</el-table>
+    <el-pagination
+        style="text-align:right;padding-top: 20px;"
+        @size-change="configSizeChange"
+        @current-change="configCurrentChange"
+        :current-page="pageNum"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next,jumper"
+        :total="totalNum">
+    </el-pagination>
 	</div>
 </template>
 
@@ -96,12 +106,16 @@ export default {
 	components: { SelectGoods, AddRecommend, Preferential },
 	data() {
 		return {
+      pageNum:1,
+      pageSize:10,
+      totalNum:0,
 			loading: false,
 			list: [],
 			options: [],
 			btnId: '',
       outIds: '',
-      total: null
+      total: null,
+      goodsList:[]
 		}
 	},
 	mounted() {
@@ -133,8 +147,10 @@ export default {
 		},
 		setData(data) {
 			this.list = data.goodsList;
+      this.goodsList=data.goodsList;
 			this.btnId = data.id;
-      this.total=this.list.length;
+      this.total=this.list.length;      
+      this.totalNum=this.list.length;
 		},
 		getList() {
 			if (!this.shopId) return;
@@ -151,8 +167,10 @@ export default {
                 this.list = data[i].goodsList;
               }
             }
-          }          
+          }
+          this.goodsList=this.list;  
           this.total=this.list.length;
+          this.totalNum=this.list.length;
 				}else{
           this.options=[];
         }
@@ -214,7 +232,23 @@ export default {
             message: '已取消所选的商品!'
           });          
       });
-		}
+		},
+    getPageList(){            
+      let startRow = (this.pageNum - 1) * this.pageSize+1-1;//开始显示的行  
+      let endRow = this.pageNum * this.pageSize;//结束显示的行
+      endRow = (endRow > this.totalNum)? this.totalNum : endRow;
+      this.list=this.goodsList.slice(startRow,endRow);  
+    },
+    configSizeChange(size){        
+      this.pageNum=1;
+      this.pageSize=size;
+      this.getPageList();
+    },
+    configCurrentChange(current){
+      this.pageNum=current;
+      this.pageSize=this.pageSize;
+      this.getPageList();
+    },
 	}
 }
 </script>
@@ -224,6 +258,6 @@ export default {
 	height: 50px;
 	align-items: center;
 	text-align: right;
-
 }
+
 </style>
\ No newline at end of file

src/views/shop/shop/components/recommend.vue

@@ -108,6 +108,8 @@ export default {
 	height: 50px;
 	align-items: center;
 	text-align: right;
-
+}
+.pagination-container {
+  height: 30px;
 }
 </style>
\ No newline at end of file