refactor: meVxeTable 分页重构

src/components/meVxeTable/components/pagination.vue

@@ -0,0 +1,70 @@
+<template>
+  <el-pagination
+    v-bind="options"
+    :current-page="currentPage"
+    :page-size="pageSize"
+    :layout="pageLayout"
+    :pager-count="pagerCount"
+    @update:current-page="setPage"
+    @update:page-size="setSize"
+  ></el-pagination>
+</template>
+<script lang="ts">
+import { useGlobalStore } from '@/store';
+import { ElPagination } from 'element-plus';
+import { PropType } from 'vue';
+export default defineComponent({
+  props: {
+    options: {
+      type: Object as PropType<
+        {
+          noAutoLayout?: boolean; //关闭手机模式自动更改
+          change: (page: number, size: number) => void; //page或size改变时触发
+        } & ComponentProps<typeof ElPagination>
+      >,
+      required: true,
+    },
+  },
+  setup(props) {
+    const globalStore = useGlobalStore();
+    const pageLayout = computed(() =>
+      !props.options?.noAutoLayout && globalStore.isMobile ? 'prev, pager, next' : props.options?.layout,
+    );
+    const pagerCount = computed(() =>
+      !props.options?.noAutoLayout && globalStore.isMobile ? 5 : props.options?.pagerCount,
+    );
+    const currentPage = ref(1);
+    watch(
+      () => props.options?.currentPage,
+      (page) => {
+        currentPage.value = page!;
+      },
+      { immediate: true },
+    );
+    const setPage = (page: number) => {
+      currentPage.value = page;
+      props.options?.change(currentPage.value, pageSize.value);
+    };
+    const pageSize = ref(10);
+    watch(
+      () => props.options?.pageSize,
+      (size) => {
+        pageSize.value = size!;
+      },
+      { immediate: true },
+    );
+    const setSize = (size: number) => {
+      pageSize.value = size;
+      props.options?.change(currentPage.value, pageSize.value);
+    };
+    return {
+      pageLayout,
+      pagerCount,
+      currentPage,
+      pageSize,
+      setPage,
+      setSize,
+    };
+  },
+});
+</script>

src/components/meVxeTable/index.vue

@@ -85,19 +85,12 @@
         </template>
       </vxe-table>
     </div>
-    <el-pagination
-      v-if="paginationOptions"
-      v-bind="paginationOptions"
-      v-model:current-page="paginationOptions.currentPage"
-      v-model:page-size="paginationOptions.pageSize"
-      :layout="pageLayout"
-      :pager-count="pagerCount"
-      class="pagination me-vxe-footer"
-    ></el-pagination>
+    <pagination v-if="paginationOptions" :options="paginationOptions" class="pagination me-vxe-footer"></pagination>
   </div>
 </template>
 <script lang="ts">
 import './install';
+import pagination from './components/pagination.vue';
 import { ComponentCustomProperties, ComponentOptionsMixin, ExtractPropTypes, PropType, Ref } from 'vue';
 import {
   VXEComponent,
@@ -152,12 +145,7 @@ const props = {
     type: [String, Function] as PropType<string | ((t: ComponentCustomProperties['$t']) => string)>,
     default: () => (t: ComponentCustomProperties['$t']) => t('快捷搜索'),
   },
-  paginationOptions: Object as PropType<
-    {
-      noAutoLayout?: boolean; //关闭手机模式自动更改
-      onChange: (page: number, size: number) => void; //page或size改变是触发
-    } & ComponentProps<typeof ElPagination>
-  >,
+  paginationOptions: Object as PropType<InstanceType<typeof pagination>['options']>,
 };
 const emits = ['quickSearch', 'refresh', 'add', 'update:quickSearch'] as unknown as {
   quickSearch: (searchText: string) => void;
@@ -167,7 +155,7 @@ const emits = ['quickSearch', 'refresh', 'add', 'update:quickSearch'] as unknown
 };
 export default defineComponent<
   ComponentProps<VXEComponent<VxeTableProps, VxeTableEventProps>> & Partial<ExtractPropTypes<typeof props>>,
-  { [k: string]: any; vxeTableRef: Ref<VxeTableInstance | undefined> },
+  { vxeTableRef: Ref<VxeTableInstance | undefined> },
   Record<string, any>,
   Record<string, any>,
   Record<string, any>,
@@ -176,6 +164,7 @@ export default defineComponent<
   typeof emits
 >({
   name: 'MeVxeTable',
+  components: { pagination },
   inheritAttrs: false,
   props: props as any,
   emits,
@@ -203,22 +192,6 @@ export default defineComponent<
         }, [] as string[]);
       });
     });
-
-    const globalStore = useGlobalStore();
-    const pageLayout = computed(() =>
-      !props.paginationOptions?.noAutoLayout && globalStore.isMobile
-        ? 'prev, pager, next'
-        : props.paginationOptions?.layout,
-    );
-    const pagerCount = computed(() =>
-      !props.paginationOptions?.noAutoLayout && globalStore.isMobile ? 5 : props.paginationOptions?.pagerCount,
-    );
-    if (props.paginationOptions?.onChange) {
-      watch([() => props.paginationOptions!.currentPage, () => props.paginationOptions!.pageSize], ([page, size]) =>
-        props.paginationOptions?.onChange(page!, size!),
-      );
-    }
-
     expose({ vxeTableRef });
     return {
       vxeTableRef,
@@ -253,8 +226,6 @@ export default defineComponent<
         );
       },
       showSearch,
-      pageLayout,
-      pagerCount,
     };
   },
 });

src/views/components/vxeTable/index.vue

@@ -295,14 +295,14 @@ const searchForm = reactive({
   size: 10,
 });
 const { loading, run, data } = listApi({ defaultParams: [searchForm], manual: false });
-const getData = (page = searchForm.page) => {
-  run(Object.assign(searchForm, { page }));
+const getData = (page = searchForm.page, size = searchForm.size) => {
+  run(Object.assign(searchForm, { page, size }));
 };
 const paginationOptions = reactive({
-  currentPage: computedProxy(searchForm, 'page'),
-  pageSize: computedProxy(searchForm, 'size'),
+  currentPage: computed(() => searchForm.page),
+  pageSize: computed(() => searchForm.size),
   total: computed(() => data.value?.count ?? 0),
-  onChange: getData,
+  change: getData,
 });
 const print = ref({} as object | boolean);
 </script>