优化 Table 动态监测表格宽度，是否显示水平滚动条。

thinkgem · Nov 15, 2024 · 0a4c7fd · 0a4c7fd
1 parent 05c31be
commit 0a4c7fd
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts
@@ -6,7 +6,7 @@ import { isBoolean } from '/@/utils/is';
 import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
 import { useModalContext } from '/@/components/Modal';
 import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
-import { useDebounceFn } from '@vueuse/core';
+import { useDebounceFn, useResizeObserver } from '@vueuse/core';
 import { useScroll } from '/@/hooks/event/useScroll';
 
 export function useTableScroll(
@@ -203,6 +203,12 @@ export function useTableScroll(
     debounceRedoHeight();
   });
 
+  const tableWidthRef = ref();
+  useResizeObserver(wrapRef, () => {
+    const table = unref(tableElRef);
+    tableWidthRef.value = table?.$el?.offsetWidth || 600; // 默认宽度不小于，列中指定的宽度总合
+  });
+
   const getScrollRef: ComputedRef<any> = computed(() => {
     let width = 0;
     // if (unref(rowSelectionRef)) {
@@ -220,12 +226,11 @@ export function useTableScroll(
     //   width += unsetWidthColumnSize * 50;
     // }
 
-    const table = unref(tableElRef);
-    const tableWidth = table?.$el?.offsetWidth ?? 600; // 默认宽度不小于，列中指定的宽度总合
+    const tableWidth = tableWidthRef.value;
     const { canResize, scroll } = unref(propsRef);
     const canScrollX = tableWidth == 0 || width == 0 || tableWidth > width;
     return {
-      x: canScrollX ? (canResize ? width : undefined) : width,
+      x: canScrollX ? (canResize ? tableWidth : undefined) : tableWidth,
       y: canResize ? unref(tableHeightRef) : undefined,
       scrollToFirstRowOnChange: true,
       ...scroll,

diff --git a/src/views/sys/empUser/formEmployeeOfficeList.vue b/src/views/sys/empUser/formEmployeeOfficeList.vue
@@ -14,9 +14,8 @@
 <script lang="ts" setup>
   import { useI18n } from '/@/hooks/web/useI18n';
   import { Icon } from '/@/components/Icon';
-  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
+  import { BasicTable, useTable } from '/@/components/Table';
   import { officeTreeData } from '/@/api/sys/office';
-  import { areaTreeData } from '/@/api/sys/area';
   import { Ref } from 'vue';
 
   const { t } = useI18n('sys.empUser');
@@ -91,6 +90,7 @@
         title: t('附属机构'),
         dataIndex: 'officeCode',
         dataLabel: 'officeName',
+        width: 130,
         align: 'left',
         editRow: true,
         editComponent: 'TreeSelect',
@@ -105,6 +105,7 @@
         title: t('附属岗位'),
         dataIndex: 'postCode',
         dataLabel: 'postName',
+        width: 130,
         align: 'left',
         editRow: true,
         editComponent: 'Select',