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è)屬性對應(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è)對象
{
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)擊行
};
}}
/>
我們在zjq這個(gè)函數(shù)中能獲取到當(dāng)前點(diǎn)擊的行內(nèi)容和行下標(biāo)；
zjq = (rowItem, index) => {
console.log("LiuQing")
this.setState({
index
})
}
我們在狀態(tài)機(jī)中存儲(chǔ)一下index，用于判斷哪個(gè)下標(biāo)顯示突出的背景顏色
state={
index:""
}
rowClassName
下面就該說table的另一個(gè)屬性了行類名rowClassName，這個(gè)屬性對應(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.js下引入百度地圖jsApi的兩種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能(完整代碼)
最近在開發(fā)移動(dòng)端項(xiàng)目，通過向左滑動(dòng)出現(xiàn)刪除按鈕，點(diǎn)擊即可刪除，怎么實(shí)現(xiàn)這個(gè)功能呢，接下來小編給大家?guī)韺?shí)例代碼幫助大家學(xué)習(xí)vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧2021-05-05
vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡單拖拽元素功能
這篇文章主要為大家詳細(xì)介紹了vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡單拖拽元素功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
本片文章主要寫了，Vue3開發(fā)時(shí)運(yùn)用Vant UI庫的一些避坑點(diǎn)。讓有問題的小伙伴可以快速了解是為什么。也是給自己做一個(gè)記錄2023-04-04
vue-element-admin項(xiàng)目導(dǎo)入和導(dǎo)出的實(shí)現(xiàn)
組件是Vue.js最強(qiáng)大的功能，這篇文章主要介紹了vue-element-admin項(xiàng)目導(dǎo)入和導(dǎo)出的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了Vue使用Canvas繪制圖片、矩形、線條、文字，下載圖片的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue表格顯示字符串過長的問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
本篇文章主要介紹了VueJs路由跳轉(zhuǎn)——vue-router的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
Vue實(shí)現(xiàn)記住賬號(hào)密碼功能的操作過程
這篇文章主要介紹了Vue實(shí)現(xiàn)記住賬號(hào)密碼功能,用戶登錄時(shí)若勾選“記住我”功能選項(xiàng)，則將登錄名和密碼（加密后）存入本地緩存，下次登錄頁面加載時(shí)自動(dòng)獲取保存好的賬號(hào)和密碼（需解密），回顯到登錄輸入框中，下面分享我實(shí)現(xiàn)的具體步驟，需要的朋友可以參考下2022-07-07
Axios是一個(gè)功能強(qiáng)大、易用性高的HTTP庫,適用于大多數(shù)的前端項(xiàng)目,它提供了豐富的功能和靈活的配置選項(xiàng),可以滿足不同項(xiàng)目的需求,這篇文章主要介紹了vue中使用axios的作用,需要的朋友可以參考下2023-08-08