解決antd的Table組件使用rowSelection屬性實現(xiàn)多選時遇到的bug
更新時間：2024年08月14日 15:21:40 作者：JavaWizard-M
這篇文章主要介紹了解決antd的Table組件使用rowSelection屬性實現(xiàn)多選時遇到的bug問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
前言
前端樣式框架采用AntDesign時，經(jīng)常會使用到Table組件，
如果要有實現(xiàn)多選或選擇的需求時往往就會用到rowSelection屬性
效果如下：
rowSelection屬性屬性值如下：
問題
文檔中并沒有說明選擇時以數(shù)據(jù)中的哪個屬性為準
看官方案例是默認以名為key的屬性為準
那如果我們項目要展示的數(shù)據(jù)沒有key
而想要以數(shù)據(jù)中的id為準，該如何設(shè)置？
解決方法
在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}
/>
關(guān)鍵代碼：
rowKey= {record => record.id}指明rowKey為數(shù)據(jù)中的id，否則在進行選擇、或者實現(xiàn)默認選擇時會出現(xiàn)離奇現(xiàn)象，總是到不到想要的效果
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了react使用echart繪制地圖,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
React??memo允許你的組件在?props?沒有改變的情況下跳過重新渲染的問題記錄
使用?memo?將組件包裝起來,以獲得該組件的一個?記憶化?版本,只要該組件的?props?沒有改變,這個記憶化版本就不會在其父組件重新渲染時重新渲染,這篇文章主要介紹了React??memo允許你的組件在?props?沒有改變的情況下跳過重新渲染,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了React文件分段上傳實現(xiàn)方法，將文件切成多個小的文件；將切片并行上傳；所有切片上傳完成后，服務(wù)器端進行切片合成；當分片上傳失敗，可以在重新上傳時進行判斷，只上傳上次失敗的部分實現(xiàn)斷點續(xù)傳；當切片合成為完整的文件，通知客戶端上傳成功2022-11-11
React中組件的this.state和setState的區(qū)別
在React開發(fā)中,this.state用于初始化和讀取組件狀態(tài),而setState()用于安全地更新狀態(tài),正確使用這兩者對于管理React組件狀態(tài)至關(guān)重要,避免性能問題和常見錯誤2024-09-09
我們項目中通常會需要引入字體,所以下面這篇文章主要給大家介紹了關(guān)于如何在React項目中引入字體文件并使用的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-08-08
圖文示例講解useState與useReducer性能區(qū)別
這篇文章主要為大家介紹了useState與useReducer性能區(qū)別圖文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
React利用lazy+Suspense實現(xiàn)路由懶加載
這篇文章主要為大家詳細介紹了React如何利用lazy+Suspense實現(xiàn)路由懶加載，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06
詳解如何在React中優(yōu)雅的使用addEventListener
這篇文章主要為大家詳細介紹了如何在React中優(yōu)雅的使用addEventListener，文中的示例代碼簡潔易懂，對大家學習React有一定的幫助，需要的可以參考一下2023-01-01
React封裝自定義Hook捕獲所有錯誤的實現(xiàn)方法
在 React 開發(fā)中,錯誤處理是確保應(yīng)用穩(wěn)定性和用戶體驗的重要部分,React 提供了多種錯誤捕獲方式,包括錯誤邊界**等,本文將詳細介紹這些方法,并展示如何封裝一個能夠捕獲所有同步和異步錯誤的自定義 Hook,需要的朋友可以參考下2024-12-12
詳解React Angular Vue三大前端技術(shù)
當前世界中，技術(shù)發(fā)展非常迅速并且變化迅速，開發(fā)者需要更多的開發(fā)工具來解決不同的問題。本文就對于當下主流的前端開發(fā)技術(shù)React、Vue、Angular這三個框架做個相對詳盡的探究，目的是為了解開這些前端技術(shù)的面紗，看看各自的廬山真面目。2021-05-05