optimize(projects): optimize table scrollConfig. fixed #25

src/hooks/common/table.ts

@@ -1,7 +1,8 @@
-import { computed, effectScope, onScopeDispose, reactive, ref, watch } from 'vue';
-import type { Ref } from 'vue';
+import { computed, effectScope, onScopeDispose, reactive, ref, shallowRef, toValue, watch } from 'vue';
+import type { MaybeRef, Ref } from 'vue';
 import type { TablePaginationConfig } from 'ant-design-vue';
 import { cloneDeep } from 'lodash-es';
+import { useElementSize } from '@vueuse/core';
 import { useBoolean, useHookTable } from '@sa/hooks';
 import { useAppStore } from '@/store/modules/app';
 import { $t } from '@/locales';
@@ -210,3 +211,20 @@ export function useTableOperate<T extends TableData = TableData>(data: Ref<T[]>,
     onDeleted
   };
 }
+
+export function useTableScroll(scrollX: MaybeRef<number> = 702) {
+  const tableWrapperRef = shallowRef<HTMLElement | null>(null);
+  const { height: wrapperElHeight } = useElementSize(tableWrapperRef);
+
+  const scrollConfig = computed(() => {
+    return {
+      y: wrapperElHeight.value - 72,
+      x: toValue(scrollX)
+    };
+  });
+
+  return {
+    tableWrapperRef,
+    scrollConfig
+  };
+}

src/views/manage/menu/index.vue

@@ -4,14 +4,15 @@ import { Button, Popconfirm, Tag } from 'ant-design-vue';
 import type { Ref } from 'vue';
 import { useBoolean } from '@sa/hooks';
 import { fetchGetAllPages, fetchGetMenuList } from '@/service/api';
-import { useTable, useTableOperate } from '@/hooks/common/table';
+import { useTable, useTableOperate, useTableScroll } from '@/hooks/common/table';
 import { $t } from '@/locales';
 import { yesOrNoRecord } from '@/constants/common';
 import { enableStatusRecord, menuTypeRecord } from '@/constants/business';
 import SvgIcon from '@/components/custom/svg-icon.vue';
 import MenuOperateModal, { type OperateType } from './modules/menu-operate-modal.vue';
 
 const { bool: visible, setTrue: openModal } = useBoolean();
+const { tableWrapperRef, scrollConfig } = useTableScroll();
 
 const { columns, columnChecks, data, loading, pagination, getData } = useTable({
   apiFn: fetchGetMenuList,
@@ -216,8 +217,13 @@ init();
 </script>
 
 <template>
-  <div class="flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
-    <ACard :title="$t('page.manage.menu.title')" :bordered="false" class="sm:flex-1-hidden card-wrapper">
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <ACard
+      :title="$t('page.manage.menu.title')"
+      :bordered="false"
+      :body-style="{ flex: 1, overflow: 'hidden' }"
+      class="flex-col-stretch sm:flex-1-hidden card-wrapper"
+    >
       <template #extra>
         <TableHeaderOperation
           v-model:columns="columnChecks"
@@ -229,6 +235,7 @@ init();
         />
       </template>
       <ATable
+        ref="tableWrapperRef"
         :columns="columns"
         :data-source="data"
         :row-selection="{
@@ -239,9 +246,9 @@ init();
         size="small"
         :loading="loading"
         row-key="id"
-        :scroll="{ x: 702 }"
+        :scroll="scrollConfig"
         :pagination="pagination"
-        class="sm:h-full"
+        class="h-full"
       />
       <MenuOperateModal
         v-model:visible="visible"

src/views/manage/role/index.vue

@@ -1,26 +1,13 @@
 <script setup lang="tsx">
-import { computed, shallowRef } from 'vue';
 import { Button, Popconfirm, Tag } from 'ant-design-vue';
-import { useElementSize } from '@vueuse/core';
 import { fetchGetRoleList } from '@/service/api';
-// import { useAppStore } from '@/store/modules/app';
-import { useTable, useTableOperate } from '@/hooks/common/table';
+import { useTable, useTableOperate, useTableScroll } from '@/hooks/common/table';
 import { $t } from '@/locales';
 import { enableStatusRecord } from '@/constants/business';
 import RoleOperateDrawer from './modules/role-operate-drawer.vue';
 import RoleSearch from './modules/role-search.vue';
 
-// const appStore = useAppStore();
-
-const wrapperEl = shallowRef<HTMLElement | null>(null);
-const { height: wrapperElHeight } = useElementSize(wrapperEl);
-
-const scrollConfig = computed(() => {
-  return {
-    y: wrapperElHeight.value - 72,
-    x: 702
-  };
-});
+const { tableWrapperRef, scrollConfig } = useTableScroll();
 
 const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetRoleList,
@@ -152,7 +139,7 @@ function edit(id: number) {
         />
       </template>
       <ATable
-        ref="wrapperEl"
+        ref="tableWrapperRef"
         :columns="columns"
         :data-source="data"
         :row-selection="{

src/views/manage/user/index.vue

@@ -1,22 +1,14 @@
 <script setup lang="tsx">
 import { Button, Popconfirm, Tag } from 'ant-design-vue';
-import { computed, shallowRef } from 'vue';
-import { useElementSize } from '@vueuse/core';
 import { fetchGetUserList } from '@/service/api';
+import { useTable, useTableOperate, useTableScroll } from '@/hooks/common/table';
 import { $t } from '@/locales';
 import { enableStatusRecord, userGenderRecord } from '@/constants/business';
-import { useTable, useTableOperate } from '@/hooks/common/table';
 import UserOperateDrawer from './modules/user-operate-drawer.vue';
 import UserSearch from './modules/user-search.vue';
-const wrapperEl = shallowRef<HTMLElement | null>(null);
-const { height: wrapperElHeight } = useElementSize(wrapperEl);
-
-const scrollConfig = computed(() => {
-  return {
-    y: wrapperElHeight.value - 72,
-    x: 702
-  };
-});
+
+const { tableWrapperRef, scrollConfig } = useTableScroll();
+
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetUserList,
   apiParams: {
@@ -182,7 +174,7 @@ function edit(id: number) {
         />
       </template>
       <ATable
-        ref="wrapperEl"
+        ref="tableWrapperRef"
         :columns="columns"
         :data-source="data"
         size="small"