diff --git a/docs/zh-CN/components/table.md b/docs/zh-CN/components/table.md index 279612a4491..b678b67e2e0 100755 --- a/docs/zh-CN/components/table.md +++ b/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 --git a/packages/amis-core/src/store/table.ts b/packages/amis-core/src/store/table.ts index 4720c823706..8605470f216 100644 --- a/packages/amis-core/src/store/table.ts +++ b/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 = config.columns diff --git a/packages/amis-core/src/store/table2.ts b/packages/amis-core/src/store/table2.ts index 5ef5d76bca8..29c91c03643 100644 --- a/packages/amis-core/src/store/table2.ts +++ b/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 --git a/packages/amis/src/renderers/Table/index.tsx b/packages/amis/src/renderers/Table/index.tsx index 49906b6f579..c5d999ff317 100644 --- a/packages/amis/src/renderers/Table/index.tsx +++ b/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, diff --git a/packages/amis/src/renderers/Table2/index.tsx b/packages/amis/src/renderers/Table2/index.tsx index ba37c6ceca6..9f7c6306606 100644 --- a/packages/amis/src/renderers/Table2/index.tsx +++ b/packages/amis/src/renderers/Table2/index.tsx @@ -554,14 +554,16 @@ export default class Table2 extends React.Component { 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 { const store = props.store; changedEffect( - ['orderBy', 'columnsTogglable', 'canAccessSuperData'], + ['orderBy', 'columnsTogglable', 'canAccessSuperData', 'persistKey'], prevProps, props, changes => {