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: () => {}, // 點擊表頭行
};
}}
/>
很明顯 這個屬性對應的是一個回調函數(shù)，這個回調函數(shù)是有兩個參數(shù)的
- 第一個參數(shù)是當前行的信息
- 第二個參數(shù)是當前行在table數(shù)組中的下標index
我們這倆主要數(shù)onClick這個事件，當我們給onRow賦值為一個回調函數(shù)之后，回調函數(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ù)中能獲取到當前點擊的行內容和行下標；
zjq = (rowItem, index) => {
console.log("LiuQing")
this.setState({
index
})
}
我們在狀態(tài)機中存儲一下index，用于判斷哪個下標顯示突出的背景顏色
state={
index:""
}
rowClassName
下面就該說table的另一個屬性了行類名rowClassName，這個屬性對應的也是一個函數(shù)，這個函數(shù)的默認兩個參數(shù)同樣是當前行內容和當前行下標，返回值為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;
}
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue路由攔截及頁面跳轉的設置方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細介紹了Vue彈窗組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒
這篇文章主要介紹了Vue3+vantUI3時間組件封裝過程支持選擇年以及年月日時分秒,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要為大家介紹了Vue在css中圖片路徑問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
最近在利用springboot+vue整合開發(fā)一個前后端分離的個人博客網站，所以這一篇總結一下在開發(fā)中遇到的一個問題，關于解決在使用vue和springboot在開發(fā)前后端分離的項目時，如何解決跨域問題。在這里分別分享兩種方法，分別在前端vue中解決和在后臺springboot中解決。2021-10-10
vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題
這篇文章主要介紹了vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
下面小編就為大家分享一篇C#實現(xiàn)將一個字符轉換為整數(shù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了如何在Vue.JS中使用圖標組件，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-08-08
在vue項目中，搜索功能是我們經常需要使用的一個場景，最常用的是在列表數(shù)據(jù)中搜索一個想要的，今天的例子就是我們實現(xiàn)vue從列表數(shù)據(jù)中搜索，希望對大家有所幫助2023-03-03