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