feat(table): 新增 change 回调函数, 支持数据分页

docs/docs/zh-CN/components/table.md

@@ -5,7 +5,7 @@
     <template v-slot:username="{ data }"> {{data.username}} </template>
     <template v-slot:password="{ data }"> {{data.password}} </template>
     <template v-slot:operator="{ data }">
-      <lay-button type="primary">修改</lay-button>
+      <lay-button >修改</lay-button>
       <lay-button type="primary">删除</lay-button>
     </template>
   </lay-table>
@@ -53,4 +53,72 @@ export default {
 }
 </script>
 
+:::
+
+::: demo
+
+<template>
+  <lay-table :columns="columns" :dataSource="dataSource" :page="page" @change="change">
+    <template v-slot:username="{ data }"> {{data.username}} </template>
+    <template v-slot:password="{ data }"> {{data.password}} </template>
+    <template v-slot:operator="{ data }">
+      <lay-button >修改</lay-button>
+      <lay-button type="primary">删除</lay-button>
+    </template>
+  </lay-table>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    
+    const page = {
+      total: 100,
+      limit: 10
+    }
+
+    const change = function({ current }){
+      console.log("当前页:" + JSON.stringify(current))
+    }
+
+    const columns = [
+      {
+        title:"账户",
+        width:"200px",
+        slot:"username",
+        key:"username"
+      },{
+        title:"密码",
+        width: "180px",
+        slot:"password",
+        key:"password"
+      },{
+        title:"年龄",
+        width: "180px",
+        key:"age"
+      },{
+        title:"操作",
+        width: "180px",
+        customSlot:"operator",
+        key:"operator"
+      }
+    ]
+
+    const dataSource = [
+      {username:"root", password:"root", age:"18"},
+      {username:"woow", password:"woow", age:"20"}
+    ]
+
+    return {
+      page,
+      change,
+      columns,
+      dataSource
+    }
+  }
+}
+</script>
+
 :::

src/module/table/index.vue

@@ -108,8 +108,8 @@
           </table>
         </div>
       </div>
-      <div class="layui-table-page">
+      <div v-if="page" class="layui-table-page">
-        <lay-page total="100" limit="10" showPage showLimit showSkip></lay-page>
+        <lay-page :total="page.total" :limit="page.limit" @jump="change" showPage showLimit showSkip></lay-page>
       </div>
     </div>
   </div>
@@ -122,8 +122,15 @@ const props =
     columns?: Object[]
     dataSource?: Object[]
     skin?: string
+    page?: Object
   }>()
 
+const emit = defineEmits(['change'])
+
 const slot = useSlots()
 const slots = slot.default && slot.default()
+
+const change = function(page: any){
+  emit('change',page)
+}
 </script>