diff --git a/packages/table/src/Table.tsx b/packages/table/src/Table.tsx index 918840161de3..967551550dfb 100644 --- a/packages/table/src/Table.tsx +++ b/packages/table/src/Table.tsx @@ -424,6 +424,7 @@ const ProTable = < actionRef: propsActionRef, columns: propsColumns = [], toolBarRender, + optionsRender, onLoad, onRequestError, style, @@ -818,28 +819,31 @@ const ProTable = < const isLightFilter: boolean = search !== false && search?.filterType === 'light'; - const onFormSearchSubmit = (values: Y): any => { - // 判断search.onSearch返回值决定是否更新formSearch - if (options && options.search) { - const { name = 'keyword' } = - options.search === true ? {} : options.search; + const onFormSearchSubmit = useCallback( + (values: Y): any => { + // 判断search.onSearch返回值决定是否更新formSearch + if (options && options.search) { + const { name = 'keyword' } = + options.search === true ? {} : options.search; - /** 如果传入的 onSearch 返回值为 false,则不要把options.search.name对应的值set到formSearch */ - const success = (options.search as OptionSearchProps)?.onSearch?.( - counter.keyWords!, - ); + /** 如果传入的 onSearch 返回值为 false,则不要把options.search.name对应的值set到formSearch */ + const success = (options.search as OptionSearchProps)?.onSearch?.( + counter.keyWords!, + ); - if (success !== false) { - setFormSearch({ - ...values, - [name]: counter.keyWords, - }); - return; + if (success !== false) { + setFormSearch({ + ...values, + [name]: counter.keyWords, + }); + return; + } } - } - setFormSearch(values); - }; + setFormSearch(values); + }, + [counter.keyWords, options, setFormSearch], + ); const loading = useMemo(() => { if (typeof action.loading === 'object') { @@ -923,6 +927,7 @@ const ProTable = < }} searchNode={isLightFilter ? searchNode : null} options={options} + optionsRender={optionsRender} actionRef={actionRef} toolBarRender={toolBarRender} /> diff --git a/packages/table/src/components/ToolBar/index.tsx b/packages/table/src/components/ToolBar/index.tsx index 65fb6badbd33..526d5062bd62 100644 --- a/packages/table/src/components/ToolBar/index.tsx +++ b/packages/table/src/components/ToolBar/index.tsx @@ -56,6 +56,7 @@ export type ToolBarProps = { ) => React.ReactNode[]; action: React.MutableRefObject; options?: OptionConfig | false; + optionsRender?: ToolbarRenderProps['optionsRender']; selectedRowKeys?: (string | number)[]; selectedRows?: T[]; className?: string; @@ -159,6 +160,7 @@ function ToolBar({ toolbar, onSearch, columns, + optionsRender, ...rest }: ToolBarProps) { const counter = useContext(TableContext); @@ -182,7 +184,7 @@ function ToolBar({ ...propsOptions, }; - return renderDefaultOption( + const settings = renderDefaultOption( options, { ...defaultOptions, @@ -191,7 +193,41 @@ function ToolBar({ action, columns, ); - }, [action, columns, intl, propsOptions]); + if (optionsRender) { + return optionsRender( + { + headerTitle, + tooltip, + toolBarRender, + action, + options: propsOptions, + selectedRowKeys, + selectedRows, + toolbar, + onSearch, + columns, + optionsRender, + ...rest, + }, + settings, + ); + } + return settings; + }, [ + action, + columns, + headerTitle, + intl, + onSearch, + optionsRender, + propsOptions, + rest, + selectedRowKeys, + selectedRows, + toolBarRender, + toolbar, + tooltip, + ]); // 操作列表 const actions = toolBarRender ? toolBarRender(action?.current, { selectedRowKeys, selectedRows }) @@ -248,6 +284,10 @@ export type ToolbarRenderProps = { headerTitle: React.ReactNode; toolbar: ProTableProps['toolbar']; options: ProTableProps['options']; + optionsRender?: ( + props: ToolBarProps, + defaultDom: React.ReactNode[], + ) => React.ReactNode[]; toolBarRender?: ToolBarProps['toolBarRender']; actionRef: React.MutableRefObject; }; @@ -341,6 +381,7 @@ class ToolbarRender extends React.Component> { headerTitle, actionRef, toolBarRender, + optionsRender, } = this.props; // 不展示 toolbar @@ -362,6 +403,7 @@ class ToolbarRender extends React.Component> { filter: searchNode, ...toolbar, }} + optionsRender={optionsRender} /> ); }; diff --git a/packages/table/src/typing.ts b/packages/table/src/typing.ts index db021805f87b..4a0571357252 100644 --- a/packages/table/src/typing.ts +++ b/packages/table/src/typing.ts @@ -320,6 +320,8 @@ export type ProTableProps = { */ toolBarRender?: ToolBarProps['toolBarRender'] | false; + optionsRender?: ToolBarProps['optionsRender']; + /** * @name 数据加载完成后触发 */