antd實現(xiàn)table組件選中單行換樣式(比如背景顏色)
antd中table組件選中單行換樣式
項目中有一個需求,點擊某一行后,將改行的背景顏色換掉,換成一個比較醒目的顏色。
首先看了看官方,官方還是比較可愛可親的,都給我們準備好了

onRow 用法
適用于 onRow onHeaderRow onCell onHeaderCell
<Table
onRow={record => {
return {
onClick: event => {}, // 點擊行
onDoubleClick: event => {},
onContextMenu: event => {},
onMouseEnter: event => {}, // 鼠標移入行
onMouseLeave: event => {},
};
}}
onHeaderRow={(columns, index) => {
return {
onClick: () => {}, // 點擊表頭行
};
}}
/>
很明顯 這個屬性對應(yīng)的是一個回調(diào)函數(shù),這個回調(diào)函數(shù)是有兩個參數(shù)的
- 第一個參數(shù)是當(dāng)前行的信息
- 第二個參數(shù)是當(dāng)前行在table數(shù)組中的下標index

我們這倆主要數(shù)onClick這個事件,當(dāng)我們給onRow賦值為一個回調(diào)函數(shù)之后,回調(diào)函數(shù)會執(zhí)行,返回一個對象
{
onClick: event => {}, // 點擊行
onDoubleClick: event => {},
onContextMenu: event => {},
onMouseEnter: event => {}, // 鼠標移入行
onMouseLeave: event => {},
}
當(dāng)我們單擊的時候執(zhí)行onClick;
后面四個分別是鼠標雙擊、鼠標右鍵、鼠標移入和鼠標移出;
我們這倆將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) }, // 點擊行
};
}}
/>
我們在zjq這個函數(shù)中能獲取到當(dāng)前點擊的行內(nèi)容和行下標;
zjq = (rowItem, index) => {
console.log("LiuQing")
this.setState({
index
})
}
我們在狀態(tài)機中存儲一下index,用于判斷哪個下標顯示突出的背景顏色
state={
index:""
}
rowClassName
下面就該說table的另一個屬性了行類名rowClassName,這個屬性對應(yīng)的也是一個函數(shù),這個函數(shù)的默認兩個參數(shù)同樣是當(dāng)前行內(nèi)容和當(dāng)前行下標,返回值為string也就是我們的類名即可。
我們可以使用index完美的得到哪一行被點擊了

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é)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒
這篇文章主要介紹了Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
關(guān)于SpringBoot與Vue交互跨域問題解決方案
最近在利用springboot+vue整合開發(fā)一個前后端分離的個人博客網(wǎng)站,所以這一篇總結(jié)一下在開發(fā)中遇到的一個問題,關(guān)于解決在使用vue和springboot在開發(fā)前后端分離的項目時,如何解決跨域問題。在這里分別分享兩種方法,分別在前端vue中解決和在后臺springboot中解決。2021-10-10
vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題
這篇文章主要介紹了vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
C#實現(xiàn)將一個字符轉(zhuǎn)換為整數(shù)
下面小編就為大家分享一篇C#實現(xiàn)將一個字符轉(zhuǎn)換為整數(shù),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12

