antd design table更改某行資料的樣式操作
antd Table裡面有一個rowClassName方法 表格行的類名 Function(record,index):string-->返回型別是String型別。
例子：
import styless from './component/record.css';--->引入css樣式。
css:
.csbsTypes{
font-family:微軟雅黑,"Open Sans","宋體";
font-weight: bold;
}
程式碼：
<Table
title={()=><div style={{textAlign: 'center',backgroundColor:'#170A29'}}></div>}
columns={R1columns}
dataSource={this.state.RateData}
pagination={false}
rowClassName={(record,index) => record.csbsType ==='不限範圍'?'csbsTypes':''}-->因為rowClassName方法返回的是String型別，所以直接將樣式名字填進去，就會自動查詢此樣式
/>顯示結果就是：在csbsType ===“不限範圍“”的這一行字型會被加粗```
補充知識：vue 給ant design table 元件自定義點選行（選中行）樣式和斑馬紋樣式
寫在開頭：
element-ui的table元件有幾個屬性很好用，但是ant-design中table元件是沒有的。
比如：
stripe： 是否為斑馬紋 table。
highlight-current-row： 是否要高亮當前行。
當然，還有好幾個其他的屬性，但是本文先只講這兩個。既然element-ui有，ant-design沒有，那我在用ant-design的table元件時，想要實現這兩個功能怎麼辦？
答案是涼拌。既然它沒有，那就自己寫，也就是二次封裝。
ok，先來實現這個屬性的功能：highlight-current-row。
highlight-current-row
首先，當然是給定義prop變數：highlightCurrentRow；再定義一個另外一個prop變數currentRow。
然後在watch中監聽currentRow的變化，每次當currentRow變化的時候，渲染一下上一個選中行和當前選中行的樣式。
currentRow (val) {
if (this.highlightCurrentRow) {
this.renderRowStyleAfterRowClick(val)
}
}highlightCurrentRow為true的時候，才需要渲染新的樣式。
renderRowStyleAfterRowClick：
// 選中某一行後，渲染表格行的樣式
renderRowStyleAfterRowClick (currentRow) {
const elements = document.getElementsByClassName('ant-table-row')
const rowSelectionElement = document.getElementsByClassName('row-selection')
// 獲取上一個選中行，並移除它的選中樣式
if (rowSelectionElement.length > 0) {
rowSelectionElement[0].classList.remove('row-selection')
}
// 給當前選中行新增選中行的樣式
if (elements.length > 0) {
const rowList = [...elements]
rowList.find(t => t.dataset.rowKey === currentRow.id).classList.add('row-selection')
}
}
程式碼其實很簡單：
先拿表格當前頁的所有row元素（table元件沒有提供當前點選行的原生class）和當前選中row元素。
如果當前有選中的行，先移除這個之前新增過的css class 'row-selection'。
然後再給當前選中行添class 'row-selection'。
那個這裡就有疑問了，我怎麼樣才能找到當前行呢？table元件並沒有提供當前選中行的class（至少我沒有找到），所有我只能t通過class name 'ant-table-row' 拿到所有row,然後再從中找出你當前點選的那一行。
這個時候需要利用一個很關鍵的屬性： rowKey。
還記得ant-design table元件的api檔案最後面的那個注意嗎？
這裡提醒你，rowKey用來指定資料列的住建，也就是每一行的唯一標誌，那麼好辦了 。
我們引用table元件的時候，將rowKey設定為表格資料來源的主鍵，這樣我們就能從元素中的dataset中獲取到rowKey，然後找出當前點選行。
rowList.find(t => t.dataset.rowKey === currentRow.id)
然後給這個元素動態新增class ‘'row-selection'。
// 給表格新增懸停樣式和當前點選行新增選中樣式
.ant-table-row {
&:hover > td {
background-color: @background-color !important;
color: #fff !important;
}
&.row-selection {
background-color: @background-color !important;
color: #fff !important;
}
}
這裡設定hover時行樣式和點選時行樣式一樣，是為了不讓行點選後，該行懸停時，出現其他不一樣的樣式。如果不想設定成一樣，可以單獨設定行點選時的hover樣式和行點選時的樣式一樣。
// 給表格新增懸停樣式和當前點選行新增選中樣式
.ant-table-row {
&.row-selection {
background-color: @background-color !important;
color: #fff !important;
&:hover > td {
background-color: @background-color !important;
color: #fff !important;
}
}
}
這樣，我們的目的就達到了。
在行點選時，修改currentRow，table元件內部通過watch監測到currentRow的變化，就會觸發改變樣式的方法。
<s-table
ref="table"
size="default"
rowKey="id"
:columns="columns"
:verticalScroll="false"
:data="loadData"
:stripe="true"
:highlightCurrentRow="true"
:currentRow="selectedCustomer"
:customRow="rowClick">
...
rowClick: record => ({
// 事件
on: {
click: () => {
this.handleCurrentRowChanged(record)
}
}
})
handleCustomerChanged (record) {
this.selectedCustomer = record
}
這樣就可以了。
stripe(斑馬紋行)
實現行的stripe功能，還是比較簡單的。
新增prop 變數 stripe， 在元件的update函式鉤子內，呼叫實現斑馬紋的方法就可以了
updated () {
if (this.stripe) {
this.renderStripe()
}
}
實現斑馬紋的方式有多種，這裡只展示期中一種：
// 對錶格行進行斑馬行格式顯示
renderStripe () {
const table = document.getElementsByClassName('ant-table-row')
if (table.length > 0) {
const rowList = [...table]
rowList.forEach(row => {
const index = rowList.indexOf(row)
if (index % 2 !== 0) {
row.style.backgroundColor = '#f7f7f7'
} else {
row.style.backgroundColor = '#ffffff'
}
})
}
},
獲取到table的所有行，然後對其進行隔行設定不一樣的行背景色，目的就達到了。
有其他更多方式的朋友歡迎補充。
以上這篇antd design table更改某行資料的樣式操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。