商品列表加分页

src/App.vue

@@ -22,3 +22,9 @@ export default {
   }
 }
 </script>
+<style>
+.container{
+  /* overflow-x: scroll; */
+  width: 100% !important;
+}
+</style>

src/views/dataCenter/goods/Index.vue

@@ -173,6 +173,7 @@
       :columns="columns"
       :data="loadData"
       :rowSelection="rowSelection"
+      :pagination="pagination"
       :pageSize="15"
     >
       <!-- 商品图片 -->
@@ -186,6 +187,9 @@
         <a v-if="item.link" :href="item.link" target="_blank">{{ text }}</a>
         <p v-else>{{ text }}</p>
       </span>
+      <span slot="profit_rate" slot-scope="text, item">
+        <p>{{ text>0?Number(text)+'%':0 }}</p>
+      </span>
       <!-- 商品池 -->
       <span slot="is_pool" slot-scope="text">
         <p
@@ -225,6 +229,7 @@ import * as Api from '@/api/store'
 const columns = [
   {
     title: '商品ID',
+    width: '100px',
     dataIndex: 'goods_id',
     sorter: true,
   },
@@ -235,6 +240,7 @@ const columns = [
   },
   {
     title: '商品图片',
+    width: '110px',
     dataIndex: 'goods_image',
     scopedSlots: { customRender: 'goods_image' },
   },
@@ -244,24 +250,35 @@ const columns = [
     width: '250px',
     scopedSlots: { customRender: 'goods_name' },
   },
+  {
+    title: '成本价',
+    width: '100px',
+    dataIndex: 'cost_price_min',
+    scopedSlots: { customRender: 'cost_price_min' },
+    sorter: true,
+  },
   {
     title: '前台价',
+    width: '100px',
     dataIndex: 'goods_price_min',
     scopedSlots: { customRender: 'goods_price_min' },
     sorter: true,
   },
   {
     title: '利润',
+    width: '80px',
     dataIndex: 'profit',
     sorter: true,
   },
   {
     title: '利润率',
+    width: '110px',
     dataIndex: 'profit_rate',
-    sorter: true,
+    scopedSlots: { customRender: 'profit_rate' },
   },
   {
     title: '库存',
+    width: '80px',
     dataIndex: 'stock_total',
     sorter: true,
   },
@@ -297,6 +314,12 @@ export default {
   },
   data() {
     return {
+      pagination: {
+        total: 0, // 数据总数
+        page: 1, // 当前页码
+        pageSize: 15, // 每页显示条数
+        showQuickJumper: true, // 显示跳转输入框
+      },
       // 当前表单元素
       searchForm: this.$form.createForm(this),
       // 商品分类列表
@@ -388,6 +411,9 @@ export default {
     },
   },
   methods: {
+    handleTableChange(e){
+      console.log(e)
+    },
     validateAmount() {
       let row = this.rate
       console.log(row)
@@ -642,7 +668,7 @@ export default {
 }
 /deep/.ant-table-body {
   overflow-x: scroll;
-  max-width: 1300px;
+  max-width: 1350px;
 }
 // 列表页-操作按钮组
 .row-item-tab {