解決antd的Table組件使用rowSelection屬性實(shí)現(xiàn)多選時(shí)遇到的bug
更新時(shí)間：2024年08月14日 15:21:40 作者：JavaWizard-M
這篇文章主要介紹了解決antd的Table組件使用rowSelection屬性實(shí)現(xiàn)多選時(shí)遇到的bug問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
前言
前端樣式框架采用AntDesign時(shí)，經(jīng)常會(huì)使用到Table組件，
如果要有實(shí)現(xiàn)多選或選擇的需求時(shí)往往就會(huì)用到rowSelection屬性
效果如下：
rowSelection屬性屬性值如下：
問題
文檔中并沒有說明選擇時(shí)以數(shù)據(jù)中的哪個(gè)屬性為準(zhǔn)
看官方案例是默認(rèn)以名為key的屬性為準(zhǔn)
那如果我們項(xiàng)目要展示的數(shù)據(jù)沒有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 Hook 'useEffect' is call
這篇文章主要為大家介紹了React Hook 'useEffect' is called in function報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了React路由攔截模式及withRouter示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了react 組件傳值的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
由于 create-react-app 使用 webpack 作為其模塊打包器,你需要修改 webpack 的配置來支持 .less 文件,這篇文章主要介紹了在react配置使用less的完美方案,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了React基于RBAC的權(quán)限控制,通過定義角色和權(quán)限、編寫權(quán)限檢查函數(shù)以及在路由、組件和選擇控件中使用這些函數(shù),可以靈活地控制應(yīng)用中的訪問權(quán)限,需要的朋友可以參考下2024-05-05
React路由組件傳參的三種方式(params、search、state)
本文主要介紹了React路由組件傳參的三種方式，主要包括了params、search、state，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要跟大家介紹了關(guān)于React中事件處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要為大家介紹了React-three-fiber的使用初體驗(yàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
本文主要介紹了React組件中默認(rèn)封裝了很多屬性，有的是提供給開發(fā)者操作的，其中有三個(gè)屬性非常重要：state、props、refs。感興趣的小伙伴可以參考閱讀2023-03-03
react實(shí)現(xiàn)動(dòng)態(tài)選擇框
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)動(dòng)態(tài)選擇框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08