antd實(shí)現(xiàn)table組件選中單行換樣式(比如背景顏色)
antd中table組件選中單行換樣式
項(xiàng)目中有一個(gè)需求,點(diǎn)擊某一行后,將改行的背景顏色換掉,換成一個(gè)比較醒目的顏色。
首先看了看官方,官方還是比較可愛可親的,都給我們準(zhǔn)備好了
onRow 用法
適用于 onRow onHeaderRow onCell onHeaderCell
<Table onRow={record => { return { onClick: event => {}, // 點(diǎn)擊行 onDoubleClick: event => {}, onContextMenu: event => {}, onMouseEnter: event => {}, // 鼠標(biāo)移入行 onMouseLeave: event => {}, }; }} onHeaderRow={(columns, index) => { return { onClick: () => {}, // 點(diǎn)擊表頭行 }; }} />
很明顯 這個(gè)屬性對(duì)應(yīng)的是一個(gè)回調(diào)函數(shù),這個(gè)回調(diào)函數(shù)是有兩個(gè)參數(shù)的
- 第一個(gè)參數(shù)是當(dāng)前行的信息
- 第二個(gè)參數(shù)是當(dāng)前行在table數(shù)組中的下標(biāo)index
我們這倆主要數(shù)onClick這個(gè)事件,當(dāng)我們給onRow賦值為一個(gè)回調(diào)函數(shù)之后,回調(diào)函數(shù)會(huì)執(zhí)行,返回一個(gè)對(duì)象
{ onClick: event => {}, // 點(diǎn)擊行 onDoubleClick: event => {}, onContextMenu: event => {}, onMouseEnter: event => {}, // 鼠標(biāo)移入行 onMouseLeave: event => {}, }
當(dāng)我們單擊的時(shí)候執(zhí)行onClick;
后面四個(gè)分別是鼠標(biāo)雙擊、鼠標(biāo)右鍵、鼠標(biāo)移入和鼠標(biāo)移出;
我們這倆將onClick后面換成自己的自定義事件
上代碼:
<AAATable size={'default'} columns={columnsThird} //表格的列 dataSource={dataTableThird} //表格渲染的數(shù)據(jù) title={'INCLUDE列表'} //表格的名字 onChange={this.onChangeTableThird} //可以固定使用 total={totalThird} pageSize={pageSizeThird} current={currentPageThird} showTotal={true} rowClassName={this.rowClassNameFun} onRow={ (record, index) => { return { onClick: _ => { this.zjq(record, index) }, // 點(diǎn)擊行 }; }} />
我們?cè)趜jq這個(gè)函數(shù)中能獲取到當(dāng)前點(diǎn)擊的行內(nèi)容和行下標(biāo);
zjq = (rowItem, index) => { console.log("LiuQing") this.setState({ index }) }
我們?cè)跔顟B(tài)機(jī)中存儲(chǔ)一下index,用于判斷哪個(gè)下標(biāo)顯示突出的背景顏色
state={ index:"" }
rowClassName
下面就該說table的另一個(gè)屬性了行類名rowClassName,這個(gè)屬性對(duì)應(yīng)的也是一個(gè)函數(shù),這個(gè)函數(shù)的默認(rèn)兩個(gè)參數(shù)同樣是當(dāng)前行內(nèi)容和當(dāng)前行下標(biāo),返回值為string也就是我們的類名即可。
我們可以使用index完美的得到哪一行被點(diǎn)擊了
rowClassName={this.rowClassNameFun}
rowClassNameFun = (record, index) => { console.log(record, index, "rowClassNameFun") if (index === this.state.index) return 'mySelfClassName' }
最后就是引入樣式文件
import './index.less'
.mySelfClassName{ background-color: red; }
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue路由攔截及頁(yè)面跳轉(zhuǎn)的設(shè)置方法
這篇文章主要介紹了vue路由攔截及頁(yè)面跳轉(zhuǎn)的設(shè)置方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05Vue3+vantUI3時(shí)間組件封裝過程支持選擇年以及年月日時(shí)分秒
這篇文章主要介紹了Vue3+vantUI3時(shí)間組件封裝過程支持選擇年以及年月日時(shí)分秒,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07關(guān)于SpringBoot與Vue交互跨域問題解決方案
最近在利用springboot+vue整合開發(fā)一個(gè)前后端分離的個(gè)人博客網(wǎng)站,所以這一篇總結(jié)一下在開發(fā)中遇到的一個(gè)問題,關(guān)于解決在使用vue和springboot在開發(fā)前后端分離的項(xiàng)目時(shí),如何解決跨域問題。在這里分別分享兩種方法,分別在前端vue中解決和在后臺(tái)springboot中解決。2021-10-10vue element Cascader級(jí)聯(lián)選擇器解決最后一級(jí)顯示空白問題
這篇文章主要介紹了vue element Cascader級(jí)聯(lián)選擇器解決最后一級(jí)顯示空白問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)
下面小編就為大家分享一篇C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12Vue實(shí)現(xiàn)簡(jiǎn)單搜索功能的示例代碼
在vue項(xiàng)目中,搜索功能是我們經(jīng)常需要使用的一個(gè)場(chǎng)景,最常用的是在列表數(shù)據(jù)中搜索一個(gè)想要的,今天的例子就是我們實(shí)現(xiàn)vue從列表數(shù)據(jù)中搜索,希望對(duì)大家有所幫助2023-03-03