feat: table 的列信息本地缓存支持配置 Close: #11850

Author: 2betop

Diff for: docs/zh-CN/components/table.md

@@ -2043,6 +2043,7 @@ popOver 的其它配置请参考 [popover](./popover)
 | lazyRenderAfter  | `number`                                                 | `100`                     | 用来控制从第几行开始懒渲染行，用来渲染大表格时有用                                                                                                                                                     |                                   |
 | tableLayout      | `auto` \| `fixed`                                        | `auto`                    | 当配置为 fixed 时，内容将不会撑开表格，自动换行                                                                                                                                                        |                                   |
 | reUseRow         | `false` \| `match`                                       |                           | 默认，当 API 返回数据与当前一致时，不会触发表格行重渲染（省性能但可能导致数据渲染不同步）；为 false，则总会触发重渲染；为 match，尽量复用返回数据中 id 一致的对象，性能可认为是默认和 false 两者的折中 |                                   |
+| persistKey       | `string`                                                 |                           | 用于配置列排序、列显示的本地缓存所使用的 key                                                                                                                                                           |                                   |
 
 ### 列配置属性表
 

Diff for: packages/amis-core/src/store/table.ts

@@ -32,7 +32,7 @@ import {
   hasVisibleExpression,
   sortArray
 } from '../utils/helper';
-import {evalExpression} from '../utils/tpl';
+import {evalExpression, filter} from '../utils/tpl';
 import {IFormStore} from './form';
 import {getStoreById} from './manager';
 import {getPageId} from '../utils/getPageId';
@@ -593,7 +593,8 @@ export const TableStore = iRendererStore
     searchFormExpanded: false, // 用来控制搜索框是否展开了，那个自动根据 searchable 生成的表单 autoGenerateFilter
     lazyRenderAfter: 100,
     tableLayout: 'auto',
-    theadHeight: 0
+    theadHeight: 0,
+    persistKey: ''
   })
   .views(self => {
     function getColumnsExceptBuiltinTypes() {
@@ -851,6 +852,10 @@ export const TableStore = iRendererStore
       getSelectionUpperLimit,
 
       get columnsKey() {
+        if (self.persistKey) {
+          return filter(self.persistKey, self.data);
+        }
+
         const fn = getEnv(self).getPageId || getPageId;
         return fn() + self.path;
       },
@@ -1218,6 +1223,7 @@ export const TableStore = iRendererStore
         (self.tableLayout = config.tableLayout);
 
       config.showIndex !== undefined && (self.showIndex = config.showIndex);
+      config.persistKey !== undefined && (self.persistKey = config.persistKey);
 
       if (config.columns && Array.isArray(config.columns)) {
         let columns: Array<SColumn> = config.columns

Diff for: packages/amis-core/src/store/table2.ts

@@ -32,6 +32,8 @@ import {Api, Payload, fetchOptions, ApiObject} from '../types';
 import {ServiceStore} from './service';
 import {IFormStore} from './form';
 import {getPageId} from '../utils/getPageId';
+import {filter} from '../utils/tpl';
+
 class ServerError extends Error {
   type = 'ServerError';
 }
@@ -216,7 +218,8 @@ export const TableStore2 = ServiceStore.named('TableStore2')
     dragging: false,
     rowSelectionKeyField: 'id',
     formsRef: types.optional(types.array(types.frozen()), []),
-    canAccessSuperData: false
+    canAccessSuperData: false,
+    persistKey: ''
   })
   .views(self => {
     function getToggable() {
@@ -455,6 +458,7 @@ export const TableStore2 = ServiceStore.named('TableStore2')
         (self.columnsTogglable = config.columnsTogglable);
       config.canAccessSuperData !== undefined &&
         (self.canAccessSuperData = !!config.canAccessSuperData);
+      config.persistKey !== undefined && (self.persistKey = config.persistKey);
 
       if (typeof config.orderBy === 'string') {
         setOrderByInfo(
@@ -506,12 +510,20 @@ export const TableStore2 = ServiceStore.named('TableStore2')
       persistSaveToggledColumns();
     }
 
-    function persistSaveToggledColumns() {
+    function getPersistKey() {
+      if (self.persistKey) {
+        return filter(self.persistKey, self.data);
+      }
+
       const fn = getEnv(self).getPageId || getPageId;
+      return fn() + self.path;
+    }
+
+    function persistSaveToggledColumns() {
       const key =
-        fn() +
-        self.path +
+        getPersistKey() +
         self.toggableColumns.map(item => item.name || item.index).join('-');
+
       localStorage.setItem(
         key,
         JSON.stringify(self.activeToggaleColumns.map(item => item.index))
@@ -824,10 +836,8 @@ export const TableStore2 = ServiceStore.named('TableStore2')
           if (!isAlive(self)) {
             return;
           }
-          const fn = getEnv(self).getPageId || getPageId;
           const key =
-            fn() +
-            self.path +
+            getPersistKey() +
             self.toggableColumns.map(item => item.name || item.index).join('-');
 
           const data = localStorage.getItem(key);

Diff for: packages/amis/src/renderers/Table/index.tsx

@@ -375,6 +375,11 @@ export interface TableSchema extends BaseSchema {
    * 懒加载 API，当行数据中用 defer: true 标记了，则其孩子节点将会用这个 API 来拉取数据。
    */
   deferApi?: SchemaApi;
+
+  /**
+   * 持久化 key
+   */
+  persistKey?: string;
 }
 
 export interface TableProps extends RendererProps, SpinnerExtraProps {
@@ -654,7 +659,8 @@ export default class Table<
       lazyRenderAfter,
       tableLayout,
       resolveDefinitions,
-      showIndex
+      showIndex,
+      persistKey
     } = props;
 
     let combineNum = props.combineNum;
@@ -689,7 +695,8 @@ export default class Table<
         canAccessSuperData,
         lazyRenderAfter,
         tableLayout,
-        showIndex
+        showIndex,
+        persistKey
       },
       {
         resolveDefinitions
@@ -983,7 +990,8 @@ export default class Table<
         'canAccessSuperData',
         'lazyRenderAfter',
         'tableLayout',
-        'showIndex'
+        'showIndex',
+        'persistKey'
       ],
       prevProps,
       props,
@@ -2467,6 +2475,7 @@ export default class Table<
                 return;
               }
 
+              debugger;
               store.toggleAllColumns();
             }}
           >

Diff for: packages/amis/src/renderers/Table2/index.tsx

@@ -554,14 +554,16 @@ export default class Table2 extends React.Component<Table2Props, object> {
       rowSelection,
       keyField,
       primaryField,
-      canAccessSuperData
+      canAccessSuperData,
+      persistKey
     } = props;
 
     store.update({
       columnsTogglable,
       columns,
       canAccessSuperData,
-      rowSelectionKeyField: primaryField || rowSelection?.keyField || keyField
+      rowSelectionKeyField: primaryField || rowSelection?.keyField || keyField,
+      persistKey
     });
     Table2.syncRows(store, props, undefined) && this.syncSelected();
 
@@ -710,7 +712,7 @@ export default class Table2 extends React.Component<Table2Props, object> {
     const store = props.store;
 
     changedEffect(
-      ['orderBy', 'columnsTogglable', 'canAccessSuperData'],
+      ['orderBy', 'columnsTogglable', 'canAccessSuperData', 'persistKey'],
       prevProps,
       props,
       changes => {