perf(table): 修改内嵌内容固定展示

XiaoMi · Sep 7, 2022 · 4c482d5 · 4c482d5
1 parent d561f56
commit 4c482d5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/packages/ui/table/src/TableEmbedRow.tsx b/packages/ui/table/src/TableEmbedRow.tsx
@@ -21,6 +21,7 @@ export const TableEmbedRow = ({
     getEmbedPanelById,
     isEmbedLoadingId,
     onEmbedSwitch,
+    scrollBodyElementRef,
   } = useTableContext()
 
   const loading = isEmbedLoadingId(rowData.id)
@@ -38,7 +39,12 @@ export const TableEmbedRow = ({
       <td colSpan={colSpan}>
         {/* 乐观渲染：内嵌面板内容 */}
         <Loading size="sm" visible={loading} part>
-          {getEmbedPanelById(rowData.id)}
+          <div
+            className={`${prefixCls}__wrapper`}
+            style={{ width: scrollBodyElementRef.current?.clientWidth }}
+          >
+            {getEmbedPanelById(rowData.id)}
+          </div>
         </Loading>
       </td>
     </tr>

diff --git a/packages/ui/table/src/styles/table.scss b/packages/ui/table/src/styles/table.scss
@@ -420,9 +420,17 @@ $prefix: '#{$component-prefix}-table' !default;
   position: relative;
   z-index: 0;
 
-  & > td {
-    background-color: use-color('gray', 200);
+  &__wrapper {
+    box-sizing: border-box;
+    position: sticky;
+    left: 0;
     padding: use-spacing(10);
+    overflow: hidden;
+    background-color: use-color('gray', 200);
+  }
+
+  & > td {
+    padding: 0;
   }
 }
 

diff --git a/packages/ui/table/stories/async-expanded-render.stories.tsx b/packages/ui/table/stories/async-expanded-render.stories.tsx
@@ -9,12 +9,12 @@ export const AsyncExpandedRender = () => {
     {
       title: '商品名',
       dataKey: 'name',
-      width: 120,
+      width: 150,
     },
     {
       title: '品类',
       dataKey: 'type',
-      width: 80,
+      width: 150,
     },
     {
       title: '规格',