refactor: meTable 分页重构

meadmin-cn · Jan 8, 2023 · cee5c12 · cee5c12
1 parent f2846e9
commit cee5c12
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 43 deletions.
diff --git a/src/components/meTable/components/pagination.vue b/src/components/meTable/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>
diff --git a/src/components/meTable/index.vue b/src/components/meTable/index.vue
@@ -82,20 +82,12 @@
         <slot name="empty"></slot>
       </template>
     </el-table>
-    <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"
-    ></el-pagination>
+    <pagination v-if="paginationOptions" :options="paginationOptions" class="pagination"></pagination>
   </div>
 </template>
 <script lang="ts">
-import { useGlobalStore } from '@/store';
-import { ElPagination, ElTable } from 'element-plus';
+import pagination from './components/pagination.vue';
+import { ElTable } from 'element-plus';
 import { ComponentCustomProperties, ComponentOptionsMixin, ExtractPropTypes, PropType, Ref } from 'vue';
 import customColumn from './hooks/customColumn';
 import exportTable from './hooks/exportTable';
@@ -144,12 +136,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;
@@ -160,7 +147,6 @@ const emits = ['quickSearch', 'refresh', 'add', 'update:quickSearch'] as unknown
 export default defineComponent<
   ComponentProps<typeof ElTable> & Partial<ExtractPropTypes<typeof props>>,
   {
-    [k: string]: any;
     elTableRef: Ref<ELTableInstance | undefined>;
     customColumnProps: Ref<ReturnType<typeof customColumn> | undefined>;
   },
@@ -172,6 +158,7 @@ export default defineComponent<
   typeof emits
 >({
   name: 'MeTable',
+  components: { pagination },
   inheritAttrs: false,
   props: props as any,
   emits,
@@ -216,21 +203,6 @@ export default defineComponent<
         return index;
       };
     });
-    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({ elTableRef, customColumnProps });
     return {
       showSearch,
@@ -250,8 +222,6 @@ export default defineComponent<
           handle(elTableRef.value!, filename);
         }
       },
-      pageLayout,
-      pagerCount,
     };
   },
 });

diff --git a/src/views/components/table/index.vue b/src/views/components/table/index.vue
@@ -44,8 +44,8 @@
         <el-button @click="canDel = !canDel">{{ t('删除切换') }}</el-button>
         <el-button @click="customColumn = !customColumn">{{ t('自定义列') }}</el-button>
         <el-button @click="meTableRef!.elTableRef!.toggleAllSelection()">{{ t('全选') }}</el-button>
-        <el-button @click="paginationOptions.currentPage--">{{ t('上一页') }}</el-button>
-        <el-button @click="paginationOptions.currentPage++">{{ t('下一页') }}</el-button>
+        <el-button @click="getData(searchForm.page - 1)">{{ t('上一页') }}</el-button>
+        <el-button @click="getData(searchForm.page + 1)">{{ t('下一页') }}</el-button>
       </template>
       <el-table-column type="selection" label="选择" width="55" />
       <el-table-column prop="date" :label="t('日期')"> </el-table-column>
@@ -74,7 +74,6 @@
 </template>
 <script setup lang="ts" name="Table">
 import { listApi } from '@/api/table';
-import computedProxy from '@/hooks/core/computedProxy';
 import { useLocalesI18n } from '@/locales/i18n';
 import { FormInstance } from 'element-plus';
 const meTableRef = ref<MeTableInstance>();
@@ -92,15 +91,15 @@ const searchForm = reactive({
   size: 10,
 });
 const { loading, run, data, refresh } = 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),
   layout: 'sizes, prev, pager, next, jumper, ->, total',
-  onChange: getData,
+  change: getData,
 });
 </script>
 <style lang="scss" scoped>