添加店铺商品列表分页

components/store/CommodityList.vue

@@ -109,6 +109,15 @@
           </tr>
           </tbody>
         </table>
+        <div style="float: right;">
+          <el-pagination
+            :current-page.sync="pageParams.page"
+            :page-size="pageParams.count"
+            layout="prev, pager, next, jumper"
+            :total="commodities.totalElements"
+            @current-change="handleCurrentChange">
+          </el-pagination>
+        </div>
       </div>
     </div>
   </div>
@@ -187,11 +196,17 @@ export default {
 
       let { data } = await this.$http.get('/api/commodity/commodities', { params })
       this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', data)
+    },
+    handleCurrentChange (page) {
+      console.log(page)
+      this.pageParams.page = page
+
+      this.pageCommodity(this.pageParams, this.ids, this.searchCode)
     }
   }
 }
 </script>
-<style scoped>
+<style>
   #goods-list-fragment{
 		font-family: "Microsoft Yahei", "微软雅黑";
 	}
@@ -434,4 +449,10 @@ export default {
     url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.ttf') format('truetype'),
     url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.svg#iconfont') format('svg');
   }
+
+  <!-- 分页 -->
+  #goods-list-fragment .el-pagination .el-pager li.active {
+    border-color: #5078cb !important;
+    background-color: #5078cb !important;
+  }
 </style>

plugins/element-ui.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
-import { Breadcrumb, BreadcrumbItem, Tree } from 'element-ui'
+import { Breadcrumb, BreadcrumbItem, Tree, Pagination } from 'element-ui'
 
 Vue.use(Breadcrumb)
 Vue.use(BreadcrumbItem)
 Vue.use(Tree)
+Vue.use(Pagination)