✨(component): 开放 table 组件 page 的所有配置

package/component/src/component/table/TablePage.vue

@@ -0,0 +1,62 @@
+<script lang="ts">
+export default {
+    name: "TablePage"
+}
+</script>
+
+<script lang="ts" setup>
+import { LayIcon } from "@layui/icons-vue";
+import LayPage from "../page/index.vue";
+
+export interface LayTablePageProps {
+    showPage?: boolean;
+    showSkip?: boolean;
+    showLimit?: boolean;
+    showCount?: boolean;
+    showRefresh?: boolean;
+    modelValue: number;
+    limits?: number[];
+    pages?: number;
+    total: number;
+    limit?: number;
+    theme?: string;
+}
+
+const props = withDefaults(defineProps<LayTablePageProps>(), {
+    showPage: true,
+    showLimit: true,
+    showSkip: true,
+});
+
+const emit = defineEmits(["update:modelValue", "update:limit", "change"]);
+
+const change = (pageData: any) => {
+    emit('change', pageData)
+    emit('update:modelValue', pageData.current);
+    emit('update:limit', pageData.limit);
+}
+</script>
+
+<template>
+    <lay-page 
+        :total="total"
+        :show-page="showPage" 
+        :show-skip="showSkip" 
+        :show-limit="showLimit"
+        :show-count="showCount"
+        :show-refresh="showRefresh"
+        :limits="limits"
+        :theme="theme"
+        :pages="pages"
+        v-model:modelValue="modelValue"  
+        v-model:limit="limit"
+        @change="change">
+        <template #prev>
+            <lay-icon type="layui-icon-left" />
+        </template>
+        <template #next>
+            <lay-icon type="layui-icon-right" />
+        </template>
+    </lay-page>
+
+</template>

package/component/src/component/table/TableRow.vue

@@ -39,6 +39,7 @@ export interface LayTableRowProps {
 }
 
 const slot = useSlots();
+
 const emit = defineEmits([
   "row",
   "row-double",

package/component/src/component/table/index.vue

@@ -25,6 +25,7 @@ import LayDropdown from "../dropdown/index.vue";
 import LayPage from "../page/index.vue";
 import LayEmpty from "../empty/index.vue";
 import TableRow from "./TableRow.vue";
+import TablePage from "./TablePage.vue";
 import { nextTick } from "vue";
 
 export interface LayTableProps {
@@ -618,6 +619,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
+ {{ page }}
   <div :id="tableId">
     <table class="layui-hide" lay-filter="test"></table>
     <div class="layui-form layui-border-box layui-table-view" :class="classes">
@@ -860,24 +862,22 @@ onBeforeUnmount(() => {
           <slot name="footer"></slot>
         </div>
       </div>
-
       <div v-if="page" class="layui-table-page">
-        <lay-page
+        <table-page
-          :show-page="true"
+          :show-page="page.showPage"
-          :show-skip="true"
+          :showSkip="page.showSkip"
-          :show-limit="true"
+          :showLimit="page.showLimit"
+          :showCount="page.showCount"
+          :limits="page.limits"
+          :showRefresh="page.showRefresh"
           :total="page.total"
+          :pages="page.pages"
+          :theme="page.theme"
+          v-model="page.current"
           v-model:limit="page.limit"
-          v-model:modelValue="page.current"
           @change="change"
         >
-          <template #prev>
+        </table-page>
-            <lay-icon type="layui-icon-left" />
-          </template>
-          <template #next>
-            <lay-icon type="layui-icon-right" />
-          </template>
-        </lay-page>
       </div>
     </div>
   </div>

package/document-component/src/document/zh-CN/components/table.md

@@ -133,7 +133,8 @@ export default {
     const page3 = ref({
       total: 100,
       limit: 10,
-      current: 2
+      current: 2,
+      showRefresh: true,
     })
 
     const change3 = ({ current, limit }) => {