fix(Table): resizable属性开启后，翻页之后各列宽度未能保存(Tencent#2386)

ChuTingzj · Aug 10, 2023 · a94080e · a94080e
1 parent 2169e18
commit a94080e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx
@@ -44,6 +44,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((props, ref) => {
     resizable,
     lazyLoad,
     pagination,
+    isStatic = false,
   } = props;
   const tableRef = useRef<HTMLDivElement>();
   const tableElmRef = useRef<HTMLTableElement>();
@@ -56,7 +57,7 @@ const BaseTable = forwardRef<BaseTableRef, BaseTableProps>((props, ref) => {
   const { isMultipleHeader, spansAndLeafNodes, thList } = useTableHeader({ columns: props.columns });
   const finalColumns = useMemo(
     () => spansAndLeafNodes?.leafColumns || columns,
-    [spansAndLeafNodes?.leafColumns, columns],
+    isStatic ? [] : [spansAndLeafNodes?.leafColumns, columns],
   );
 
   // 固定表头和固定列逻辑

diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### BaseTable Props
 
 name | type | default | description | required
@@ -11,6 +12,7 @@ attach | String / Function | - | elements with popup would be attached to `attac
 bordered | Boolean | false | show table bordered | N
 bottomContent | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 cellEmptyContent | TNode | - | Typescript：`string \| TNode<BaseTableCellParams<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+isStatic | Boolean | false | Static table,used in scenarios where the columns attribute of the table does not change dynamically。Typescript：`boolean`。| N
 columns | Array | [] | table column configs。Typescript：`Array<BaseTableCol<T>>` | N
 data | Array | [] | table data。Typescript：`Array<T>` | N
 disableDataPage | Boolean | false | \- | N

diff --git a/src/table/table.md b/src/table/table.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### BaseTable Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -11,6 +12,7 @@ attach | String / Function | - | 超出省略等所有浮层元素统一绑定
 bordered | Boolean | false | 是否显示表格边框 | N
 bottomContent | TNode | - | 表格底部内容，可以用于自定义列设置等。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 cellEmptyContent | TNode | - | 单元格数据为空时呈现的内容。TS 类型：`string \| TNode<BaseTableCellParams<T>>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+isStatic | Boolean | false | 静态的表格，用于表格的columns属性不会动态变化的场景。TS 类型：`boolean`。| N
 columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array<BaseTableCol<T>>` | N
 data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
 disableDataPage | Boolean | false | 是否禁用本地数据分页。当 `data` 数据长度超过分页大小时，会自动进行本地数据分页。如果 `disableDataPage` 设置为 true，则无论何时，都不会进行本地数据分页 | N

diff --git a/src/table/type.ts b/src/table/type.ts
@@ -51,6 +51,10 @@ export interface TdBaseTableProps<T extends TableRowData = TableRowData> {
    * 单元格数据为空时呈现的内容
    */
   cellEmptyContent?: string | TNode<BaseTableCellParams<T>>;
+  /**
+   * 静态的表格，用于表格的columns属性不会动态变化的场景 @link https://github.com/Tencent/tdesign-react/issues/2386
+   */
+  isStatic?: Boolean;
   /**
    * 列配置，泛型 T 指表格数据类型
    * @default []