Merge pull request #921 from WeBankFinTech/fix-table-scrollbar

fix(Table): 修复左侧列固定的时候，没有滚动条的时候，右侧也会出现阴影的问题
WeBankFinTech · Dec 27, 2024 · ff3f979 · ff3f979
2 parents 5b7aec4 + 9881308
commit ff3f979
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/components/table/useTableStyle.ts b/components/table/useTableStyle.ts
@@ -53,7 +53,16 @@ export default ({
     });
 
     const scrollState = reactive({
-        x: 'left',
+        x: '', // 默认为空值，避免左侧列固定的时候，右侧默认出现阴影区域
+    });
+
+    watch(computed(() => scrollbarRef.value?.containerRef), () => {
+        // 有滚动条实例，说明实际内容宽度超出容器宽度，需要默认显示阴影区域
+        if (!scrollState.x && scrollbarRef.value?.containerRef) {
+            scrollState.x = 'left';
+        } else if (scrollState.x && !scrollbarRef.value?.containerRef) {
+            scrollState.x = '';
+        }
     });
 
     const headerWrapperClass = computed(() => {

diff --git a/docs/.vitepress/components/table/bordered.vue b/docs/.vitepress/components/table/bordered.vue
@@ -37,9 +37,9 @@
         :verticalLine="verticalLine"
         :data="data"
     >
-        <FTableColumn prop="date" label="日期" />
-        <FTableColumn prop="name" label="姓名" />
-        <FTableColumn prop="address" label="地址" />
+        <FTableColumn prop="date" label="日期" fixed :minWidth="100" />
+        <FTableColumn prop="name" label="姓名" :minWidth="100" />
+        <FTableColumn prop="address" label="地址" :minWidth="100" />
     </FTable>
 </template>