ant design 實現表格選中行背景色改變

平時開發過程中，經常遇到一個頁面上有兩個表格，構成頭行表的情況，例如：

antdesign的Table組件中默認只有鼠標移入行背景色改變效果，而在頭行表展示的時候，我們點擊頭表的某行數據，行表進行關聯展示，操作完行表之後，我們會發現我們已無法分辨剛剛我們點擊了頭行的哪條數據，所以，我們需要實現：點擊頭表的一條數據，該條數據背景色變深，即使移出鼠標，該行背景色仍然變深。

1.樣式global.less

在global.less中新加一個我們自定義的樣式，這樣所有需要該效果的頁面引入global.less即可使用該樣式，並且方便我們之後統一修改該背景色：

// 被選中的表格行的樣式
.clickRowStyl {
  background-color : #cbf2ff
}

2.初始化頭表選中信息存儲

在頁面的構造方法中初始化state，初始化一個屬性用於存儲我們點擊了頭表的哪一行。注意這是一個{}，而不是[]。

constructor(props){
        super(props);
        this.state = {
            hrpFactSelectedRowData : {},  //點擊選中的事實表信息，頭表信息
        };
 }

3.實現點擊頭表將行信息存儲到state中

定義頭表的行點擊事件：

//頭錶行點擊事件
onclickFact = (record) => {
        this.setState({hrpFactSelectedRowData : record}, ()=>{//這裏可以做查詢行表的操作}); 
}

將行點擊事件綁定在Table組件上

<Table columns={factColumns} dataSource={this.props.FactList} rowKey="id" 
			bordered size="middle" scroll={{ y: 240 }}
			rowSelection={factRowSelection}
			onRow={(record) => {    //行點擊事件
				return{
					onClick: (event) => this.onclickFact(record)
				}
			}}>
</Table>

4.實現頭錶行樣式根據點擊記錄動態改變

引入global.less:(這個地方估計是能不引入就能用，現在還沒研究出來)

import global from '@/global.less'

定義動態返回樣式方法：這個方法傳入的是行數據，當state中存儲的行數據(即我們剛剛點擊了的行數據)和傳入的行數據的id一致，則返回背景色加深的樣式。

//根據是否被選中返回頭錶行的className
setSelectHrpFactRowClassName = (record) => {
       return record.id === this.state.hrpFactSelectedRowData.id? global.clickRowStyl : '';
}

將動態行樣式方法綁定到Table組件上

<Table columns={factColumns} dataSource={this.props.FactList} rowKey="id" 
			bordered size="middle" scroll={{ y: 240 }}
			onRow={(record) => {    //行點擊事件
				return{
	                onClick: (event) => this.onclickFact(record)
                }
             }}
            rowClassName={this.setSelectHrpFactRowClassName}>	//動態行樣式方法
</Table>

5.效果

這樣我們就可以實現，點擊表格的某一行，該行的顏色背景色變深，即使鼠標移開，也保留變深效果。

6.備註

點擊頭表將行信息存儲到state中完全可以只保存行數據的id：
我們state中保存的實際上是我們剛剛點擊的這一行整行的數據，其實完全可以只保存該行的id，因爲動態返回樣式方法setSelectHrpFactRowClassName 中判斷該行是不剛剛點擊的行僅使用了id進行判斷。因爲我這裏剛剛點擊的整行的數據還有其他用處，所以就保存了整行的數據。
global.less中的樣式名稱保持一致：
在global.less中自定義的顏色變深的樣式的名稱，多人開發時要保持一致，這樣便於後期修改和優化，其餘的行點擊事件方法、動態返回樣式方法等可以根據各個頁面的具體意義自定義即可。

ant design 實現表格選中行背景色改變