pro-components 🐛[BUG] ProTable设置多列排序后点击不会自动触发后端

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

const columns: ProColumnType<Item>[] = useMemo( () =>[

{ title: '操作者1', dataIndex: 'operateUserName', key: 'operateUserName', width: 80, sorter: { multiple: 1, }, hideInSearch: true, }, { title: '操作者2', dataIndex: 'operateUserName', key: 'operateUserName', width: 80, sorter: { multiple: 2, }, hideInSearch: true, },

] )

之前这样设置后，点击排序可以触发后端，现在升级后不会触发

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

ProComponents 版本: [e.g. 4.0.0]
umi 版本
浏览器环境
开发环境 [e.g. mac OS] : Window

"dependencies": { "@ant-design/charts": "^2.4.0", "@ant-design/graphs": "^1.4.2", "@ant-design/icons": "^6.0.0", "@ant-design/plots": "^2.5.0", "@ant-design/pro-components": "^2.8.9", "@ant-design/use-emotion-css": "1.0.4", "@antv/data-set": "^0.11.8", "@antv/g6": "^4.8.24", "@antv/s2": "^1.56.2", "@antv/s2-react": "^1.48.0", "antd": "^5.26.2", "better-xlsx": "^0.7.6", "classnames": "^2.5.1", "devextreme": "^24.2.8", "devextreme-react": "^23.2.11", "file-saver": "^2.0.5", "html-react-parser": "^5.2.2", "js-export-excel": "^1.1.4", "lodash": "^4.17.21", "moment": "^2.30.1", "omit.js": "^2.0.2", "rc-menu": "^9.16.1", "rc-util": "^5.44.4", "react": "^18.3.1", "react-antd-column-resize": "^1.0.3", "react-beautiful-dnd": "^13.1.1", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.3.1", "react-infinite-scroll-component": "^6.1.0", "react-quill": "^2.0.0", "react-simple-verify": "^1.0.11" }, "devDependencies": { "@ant-design/pro-cli": "^3.2.1", "@testing-library/react": "^16.2.0", "@types/classnames": "^2.3.4", "@types/express": "^5.0.3", "@types/history": "^5.0.0", "@types/jest": "^30.0.0", "@types/lodash": "^4.17.18", "@types/react": "^18.3.18", "@types/react-dom": "^18.3.5", "@types/react-helmet": "^6.1.11", "@umijs/fabric": "^4.0.1", "@umijs/lint": "^4.4.11", "@umijs/max": "^4.4.11", "cross-env": "^7.0.3", "eslint": "^9.29.0", "express": "^5.1.0", "gh-pages": "^6.3.0", "husky": "^9.1.7", "jest": "^30.0.3", "jest-environment-jsdom": "^30.0.2", "lint-staged": "^16.1.2", "mockjs": "^1.1.0", "prettier": "^3.6.0", "swagger-ui-dist": "^5.25.2", "ts-node": "^10.9.2", "typescript": "^5.8.3", "umi-presets-pro": "^2.0.3" },

🚑 其他信息

Jun 25 '25 06:06 flowerDAI

我昨天也遇到了，以为是自己记错了。然后翻了翻代码是 3 周前的一个 feature。 https://github.com/ant-design/pro-components/commit/0afb275d3520dcb04b48fc7f8c89597bea90d7ad 但感觉这个判断有点 weak。对应的代码 https://github.com/ant-design/pro-components/blame/master/packages/table/src/Table.tsx#L528

有待商榷：

实际工作中本地排序比较少
需要支持本地排序，传入配置参数或许比较好
当前处理有一些很奇怪的地方。例如 columns 里面有一个 sorter 为 true，其他 columns 有两个是 multiple 的情况下，就会出现点击单列排序的字段与多列排序的字段无法同时传递给后端

Jul 01 '25 04:07 chang0022

我昨天也遇到了，以为是自己记错了。然后翻了翻代码是 3 周前的一个 feature。 0afb275 但感觉这个判断有点 weak。对应的代码 https://github.com/ant-design/pro-components/blame/master/packages/table/src/Table.tsx#L528

有待商榷：

实际工作中本地排序比较少

需要支持本地排序，传入配置参数或许比较好

当前处理有一些很奇怪的地方。例如 columns 里面有一个 sorter 为 true，其他 columns 有两个是 multiple 的情况下，就会出现点击单列排序的字段与多列排序的字段无法同时传递给后端

是啊，这个判断太不好了，有些想要本地，有些想要后台就不支持了

Jul 08 '25 02:07 lookdczar

antd table 測試起來多列排序的請求與本地混用配置(compare 一個有一個沒有)的狀況下會導致本地排序配置失效狀況

我思考看看如何擴展達成以下

重置(action.reset)時全都會回到預設值或是清空
可同時配置
- 單列本地與多列本地
- 單列請求與多列請求
- 單列本地與單列請求
- 多列本地與多列請求
- 單列本地與多列請求
- 多列本地與單列請求

Aug 03 '25 12:08 leadingtw273

antd table 測試起來多列排序的請求與本地混用配置(compare 一個有一個沒有)的狀況下會導致本地排序配置失效狀況

我思考看看如何擴展達成以下

重置(action.reset)時全都會回到預設值或是清空

可同時配置

單列本地與多列本地

單列請求與多列請求

單列本地與單列請求

多列本地與多列請求

單列本地與多列請求

多列本地與單列請求

感谢回复。配置情况确实如你列举的那么多。但实际情况思考一下。业务逻辑中不可能或者小小小概率存在本地和后端同时排序的，不然业务逻辑也太混乱了。另外如果在不使用 pro-components 的情况的时候，antd 的 Table组件的时候本地排序都是监控 onChange 自行处理，所以本地排序的逻辑本可以通过在request 自行来讲处理，而且排序这种看似高频请求，但后端做好合理的缓存即可，toC 的业务这是基本功。在自身的业务开发中，本地排序功能需求本身就不多，遇到了就自行简单处理了，因为仅仅对当前页面的排序有意义但不大，大多情况都是全量数据的过滤或排序。所有我原本觉得大道至简，添加一个配置参数，根据配置进行本地或远程排序就可以了，不然单单覆盖各种情况的设计，用起了太麻烦了。

Aug 03 '25 13:08 chang0022

antd table 測試起來多列排序的請求與本地混用配置(compare 一個有一個沒有)的狀況下會導致本地排序配置失效狀況我思考看看如何擴展達成以下

重置(action.reset)時全都會回到預設值或是清空

可同時配置

單列本地與多列本地

單列請求與多列請求

單列本地與單列請求

多列本地與多列請求

單列本地與多列請求

多列本地與單列請求

感谢回复。配置情况确实如你列举的那么多。但实际情况思考一下。业务逻辑中不可能或者小小小概率存在本地和后端同时排序的，不然业务逻辑也太混乱了。另外如果在不使用 pro-components 的情况的时候，antd 的 Table组件的时候本地排序都是监控 onChange 自行处理，所以本地排序的逻辑本可以通过在request 自行来讲处理，而且排序这种看似高频请求，但后端做好合理的缓存即可，toC 的业务这是基本功。在自身的业务开发中，本地排序功能需求本身就不多，遇到了就自行简单处理了，因为仅仅对当前页面的排序有意义但不大，大多情况都是全量数据的过滤或排序。所有我原本觉得大道至简，添加一个配置参数，根据配置进行本地或远程排序就可以了，不然单单覆盖各种情况的设计，用起了太麻烦了。

antd Table 是會在 onChange 時傳遞所有排序與篩選數據沒錯，同時也會在內部依據我們給的配置(下圖)幫我們做本地排序/篩選如果再將本地參數傳遞給 request 由用戶自己做本地處理反而會讓整體更加混亂變的不 Pro 了

我的想法是希望 request 只帶上需要服務端排序與篩選的數據，符合 request 本身的概念至於本地處理則是按配置邏輯由 antd 內部做計算處理，Pro 只是擴展針對請求的參數整理讓兩者可同時配置且混用

只是目前 antd 有 bug ，多列情況下同時使用 sortOrder 會導致本地(antd 內部)排序失效原因是請求排序會對 sortOrder 進行綁定導致 (codesandbox) 如果不綁定就會正常，但這樣又無法將排序變成受控屬性實現 action.reset 重置的功能至於其他的測試條件我目前是都可以簡單達成也不複雜我可能再研究看看這 antd bug 有沒有方法可以解如果不行我就先提符合其他內容條件的PR

Aug 04 '25 03:08 leadingtw273

antd table 測試起來多列排序的請求與本地混用配置(compare 一個有一個沒有)的狀況下會導致本地排序配置失效狀況我思考看看如何擴展達成以下

重置(action.reset)時全都會回到預設值或是清空

可同時配置

單列本地與多列本地

單列請求與多列請求

單列本地與單列請求

多列本地與多列請求

單列本地與多列請求

多列本地與單列請求

感谢回复。配置情况确实如你列举的那么多。但实际情况思考一下。业务逻辑中不可能或者小小小概率存在本地和后端同时排序的，不然业务逻辑也太混乱了。另外如果在不使用 pro-components 的情况的时候，antd 的 Table组件的时候本地排序都是监控 onChange 自行处理，所以本地排序的逻辑本可以通过在request 自行来讲处理，而且排序这种看似高频请求，但后端做好合理的缓存即可，toC 的业务这是基本功。在自身的业务开发中，本地排序功能需求本身就不多，遇到了就自行简单处理了，因为仅仅对当前页面的排序有意义但不大，大多情况都是全量数据的过滤或排序。所有我原本觉得大道至简，添加一个配置参数，根据配置进行本地或远程排序就可以了，不然单单覆盖各种情况的设计，用起了太麻烦了。

antd Table 是會在 onChange 時傳遞所有排序與篩選數據沒錯，同時也會在內部依據我們給的配置(下圖)幫我們做本地排序/篩選如果再將本地參數傳遞給 request 由用戶自己做本地處理反而會讓整體更加混亂變的不 Pro 了

我的想法是希望 request 只帶上需要服務端排序與篩選的數據，符合 request 本身的概念至於本地處理則是按配置邏輯由 antd 內部做計算處理，Pro 只是擴展針對請求的參數整理讓兩者可同時配置且混用

只是目前 antd 有 bug ，多列情況下同時使用 sortOrder 會導致本地(antd 內部)排序失效原因是請求排序會對 sortOrder 進行綁定導致 (codesandbox) 如果不綁定就會正常，但這樣又無法將排序變成受控屬性實現 action.reset 重置的功能至於其他的測試條件我目前是都可以簡單達成也不複雜我可能再研究看看這 antd bug 有沒有方法可以解如果不行我就先提符合其他內容條件的PR

ok. 我指的 request 这个是我在 Pro 不支持的本地的时候的一种方案。Pro 支持是最好的，我的观点不需要支持既可以部分本地，部分远程。Pro 是让常用的功能变得简单，希望不是既要又要还要的。我真不确定这种混合模式的需求场景。如果全部远程，部分本地，作为开发就可以用 request 自行处理。至于 antd 的 bug 我还没细看，等我看看怎么个事儿。

Update: 我看了看。确实有点奇怪，有一列配置 sortOrder 就会导致全部的排序变成受控。但只能通过重新处理传入的 columes 进行进行对每个包含 sorter 的 column 进行受控处理.... 对你提供的 Demo 处理了一下。可工作的 DEMO ，当然很多细节没有做。比如多列的排序优先级等。所以 Antd 的 bug 应该是可以解的。

Aug 04 '25 04:08 chang0022

ok. 我指的 request 这个是我在 Pro 不支持的本地的时候的一种方案。Pro 支持是最好的，我的观点不需要支持既可以部分本地，部分远程。Pro 是让常用的功能变得简单，希望不是既要又要还要的。我真不确定这种混合模式的需求场景。如果全部远程，部分本地，作为开发就可以用 request 自行处理。至于 antd 的 bug 我还没细看，等我看看怎么个事儿。

Update: 我看了看。确实有点奇怪，有一列配置 sortOrder 就会导致全部的排序变成受控。但只能通过重新处理传入的 columes 进行进行对每个包含 sorter 的 column 进行受控处理.... 对你提供的 Demo 处理了一下。可工作的 DEMO ，当然很多细节没有做。比如多列的排序优先级等。所以 Antd 的 bug 应该是可以解的。

這樣解是可以沒錯，但這增加的複雜度成本與他所能解決的問題在我看來很不划算就跟我原本專案要需要 protable 重置(action.reset)時同時重置排序/篩選(#6495)，但在專案內實作其複雜度不如提PR給 ProTable 所以才會有上次的修正(雖然改得太粗糙) 現在這狀況也一樣，如果沒有更簡單的作法那看來只能去 antd 那邊修正處理，只要那邊修正好，這邊的問題就可以直接解決基本上近期會推個PR做處理原先問題並優化代碼，這樣能解決上列大部分的問題，但這種多列綁定處理問題就看之後有沒有空處理了

Aug 04 '25 08:08 leadingtw273

ok. 我指的 request 这个是我在 Pro 不支持的本地的时候的一种方案。Pro 支持是最好的，我的观点不需要支持既可以部分本地，部分远程。Pro 是让常用的功能变得简单，希望不是既要又要还要的。我真不确定这种混合模式的需求场景。如果全部远程，部分本地，作为开发就可以用 request 自行处理。至于 antd 的 bug 我还没细看，等我看看怎么个事儿。 Update: 我看了看。确实有点奇怪，有一列配置 sortOrder 就会导致全部的排序变成受控。但只能通过重新处理传入的 columes 进行进行对每个包含 sorter 的 column 进行受控处理.... 对你提供的 Demo 处理了一下。可工作的 DEMO ，当然很多细节没有做。比如多列的排序优先级等。所以 Antd 的 bug 应该是可以解的。

這樣解是可以沒錯，但這增加的複雜度成本與他所能解決的問題在我看來很不划算就跟我原本專案要需要 protable 重置(action.reset)時同時重置排序/篩選(#6495)，但在專案內實作其複雜度不如提PR給 ProTable 所以才會有上次的修正(雖然改得太粗糙) 現在這狀況也一樣，如果沒有更簡單的作法那看來只能去 antd 那邊修正處理，只要那邊修正好，這邊的問題就可以直接解決基本上近期會推個PR做處理原先問題並優化代碼，這樣能解決上列大部分的問題，但這種多列綁定處理問題就看之後有沒有空處理了

👌，期待你的优化

Aug 04 '25 08:08 chang0022

#9216 这个合并仍然没有完全解决服务端排序问题，表头不分组时请求服务端排序已经修复正常。但当存在表头分组时，初始化时仍然无法触发请求服务端，是哪里问题或有什么方法可以解决？ @leadingtw273 @chenshuai2144

Oct 24 '25 11:10 cxiaolng

#9216 这个合并仍然没有完全解决服务端排序问题，表头不分组时请求服务端排序已经修复正常。但当存在表头分组时，初始化时仍然无法触发请求服务端，是哪里问题或有什么方法可以解决？ @leadingtw273 @chenshuai2144

能提供個 BUG 復現的 demo 嗎~? 我這幾天有空時來看一下

Oct 25 '25 06:10 leadingtw273

#9216 这个合并仍然没有完全解决服务端排序问题，表头不分组时请求服务端排序已经修复正常。但当存在表头分组时，初始化时仍然无法触发请求服务端，是哪里问题或有什么方法可以解决？ @leadingtw273 @chenshuai2144

能提供個 BUG 復現的 demo 嗎~? 我這幾天有空時來看一下

@leadingtw273 现象及复现demo如下：

首次请求，

点击排序时正常触发：

复现demo

antd-issues-9143.zip

demo启动命令： yarn start:dev

登陆账号密码： admin/ant.design

请求: http://localhost:8000/list

Nov 02 '25 06:11 cxiaolng

#9216 这个合并仍然没有完全解决服务端排序问题，表头不分组时请求服务端排序已经修复正常。但当存在表头分组时，初始化时仍然无法触发请求服务端，是哪里问题或有什么方法可以解决？ @leadingtw273 @chenshuai2144

能提供個 BUG 復現的 demo 嗎~? 我這幾天有空時來看一下

@leadingtw273 现象及复现demo如下：

首次请求，
点击排序时正常触发：复现demo
antd-issues-9143.zip

demo启动命令： yarn start:dev

登陆账号密码： admin/ant.design

请求: http://localhost:8000/list

用一下 codesandbox 做 demo 展示感謝~

Nov 03 '25 07:11 leadingtw273

#9216 这个合并仍然没有完全解决服务端排序问题，表头不分组时请求服务端排序已经修复正常。但当存在表头分组时，初始化时仍然无法触发请求服务端，是哪里问题或有什么方法可以解决？ @leadingtw273 @chenshuai2144

能提供個 BUG 復現的 demo 嗎~? 我這幾天有空時來看一下

@leadingtw273 现象及复现demo如下：首次请求，点击排序时正常触发：复现demo antd-issues-9143.zip demo启动命令： yarn start:dev 登陆账号密码： admin/ant.design 请求: http://localhost:8000/list

用一下 codesandbox 做 demo 展示感謝~

@leadingtw273 在codesandbox复现 demo做好了 https://codesandbox.io/p/sandbox/lkym6y

Nov 16 '25 04:11 cxiaolng

#9216 这个合并仍然没有完全解决服务端排序问题，表头不分组时请求服务端排序已经修复正常。但当存在表头分组时，初始化时仍然无法触发请求服务端，是哪里问题或有什么方法可以解决？ @leadingtw273 @chenshuai2144

能提供個 BUG 復現的 demo 嗎~? 我這幾天有空時來看一下

@leadingtw273 现象及复现demo如下：首次请求，点击排序时正常触发：复现demo antd-issues-9143.zip demo启动命令： yarn start:dev 登陆账号密码： admin/ant.design 请求: http://localhost:8000/list

用一下 codesandbox 做 demo 展示感謝~

@leadingtw273 在codesandbox复现 demo做好了 https://codesandbox.io/p/sandbox/lkym6y

我有發了一個 PR 修復不過這邊如果要重置的話必須使用「actionRef.reset」才行，畫面中的重置按鈕主要是針對 Search Form 表單重置而「actionRef.reset」則是一起包含了表格與表單

你可以查看我 PR 內針對這部分的測試內容

Nov 26 '25 09:11 leadingtw273

#9216 这个合并仍然没有完全解决服务端排序问题，表头不分组时请求服务端排序已经修复正常。但当存在表头分组时，初始化时仍然无法触发请求服务端，是哪里问题或有什么方法可以解决？ @leadingtw273 @chenshuai2144

能提供個 BUG 復現的 demo 嗎~? 我這幾天有空時來看一下

@leadingtw273 现象及复现demo如下：首次请求，点击排序时正常触发：复现demo antd-issues-9143.zip demo启动命令： yarn start:dev 登陆账号密码： admin/ant.design 请求: http://localhost:8000/list

用一下 codesandbox 做 demo 展示感謝~

@leadingtw273 在codesandbox复现 demo做好了 https://codesandbox.io/p/sandbox/lkym6y

我有發了一個 PR 修復不過這邊如果要重置的話必須使用「actionRef.reset」才行，畫面中的重置按鈕主要是針對 Search Form 表單重置而「actionRef.reset」則是一起包含了表格與表單

你可以查看我 PR 內針對這部分的測試內容

问题已经解决。非常感谢

Nov 29 '25 05:11 cxiaolng