解決antd的Table組件使用rowSelection屬性實現(xiàn)多選時遇到的bug
更新時間：2024年08月14日 15:21:40 作者：JavaWizard-M
這篇文章主要介紹了解決antd的Table組件使用rowSelection屬性實現(xiàn)多選時遇到的bug問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前言
前端樣式框架采用AntDesign時，經常會使用到Table組件，
如果要有實現(xiàn)多選或選擇的需求時往往就會用到rowSelection屬性
效果如下：
rowSelection屬性屬性值如下：
問題
文檔中并沒有說明選擇時以數(shù)據(jù)中的哪個屬性為準
看官方案例是默認以名為key的屬性為準
那如果我們項目要展示的數(shù)據(jù)沒有key
而想要以數(shù)據(jù)中的id為準，該如何設置？
解決方法
在Table組件中明確指出rowkey是什么
如下以react為例：
<Table
columns={comAnounceH}
dataSource={commonNewsData}
pagination={{
total: pageCount,
pageSize: 5
}}
rowSelection={{
selectedRowKeys: this.state.selectedRowKeys,
onSelect: (record, selected, selectedRows, nativeEvent) => {
this.updateSelectData(selected, Array(1).fill(record))
},
onSelectAll: (selected, selectedRows, changeRows) => {
this.updateSelectData(selected, changeRows)
},
}}
rowKey= {record => record.id}
/>
關鍵代碼：
rowKey= {record => record.id}指明rowKey為數(shù)據(jù)中的id，否則在進行選擇、或者實現(xiàn)默認選擇時會出現(xiàn)離奇現(xiàn)象，總是到不到想要的效果
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
React Hook 'useEffect' is call
這篇文章主要為大家介紹了React Hook 'useEffect' is called in function報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了React路由攔截模式及withRouter示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了react 組件傳值的三種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
由于 create-react-app 使用 webpack 作為其模塊打包器,你需要修改 webpack 的配置來支持 .less 文件,這篇文章主要介紹了在react配置使用less的完美方案,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了React基于RBAC的權限控制,通過定義角色和權限、編寫權限檢查函數(shù)以及在路由、組件和選擇控件中使用這些函數(shù),可以靈活地控制應用中的訪問權限,需要的朋友可以參考下2024-05-05
React路由組件傳參的三種方式(params、search、state)
本文主要介紹了React路由組件傳參的三種方式，主要包括了params、search、state，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要跟大家介紹了關于React中事件處理的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習React具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-07-07
這篇文章主要為大家介紹了React-three-fiber的使用初體驗，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
本文主要介紹了React組件中默認封裝了很多屬性，有的是提供給開發(fā)者操作的，其中有三個屬性非常重要：state、props、refs。感興趣的小伙伴可以參考閱讀2023-03-03
這篇文章主要為大家詳細介紹了react實現(xiàn)動態(tài)選擇框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08