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