快捷導(dǎo)航

antd design table更改某行數(shù)據(jù)的樣式操作

更新時(shí)間：2020年10月31日 10:25:28 作者：太君是我別開(kāi)槍

這篇文章主要介紹了antd design table更改某行數(shù)據(jù)的樣式操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

antd Table里面有一個(gè)rowClassName方法表格行的類(lèi)名 Function(record, index):string-->返回類(lèi)型是String類(lèi)型。

例子：

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':''}-->因?yàn)閞owClassName方法返回的是String類(lèi)型，所以直接將樣式名字填進(jìn)去，就會(huì)自動(dòng)查找此樣式
/>

顯示結(jié)果就是：在csbsType ===“不限范圍“”的這一行字體會(huì)被加粗```

補(bǔ)充知識(shí)：vue 給ant design table 組件自定義點(diǎn)擊行（選中行）樣式和斑馬紋樣式

寫(xiě)在開(kāi)頭：

element-ui的table組件有幾個(gè)屬性很好用，但是ant-design中table組件是沒(méi)有的。

比如：

stripe：是否為斑馬紋 table。

highlight-current-row：是否要高亮當(dāng)前行。

當(dāng)然，還有好幾個(gè)其他的屬性，但是本文先只講這兩個(gè)。既然element-ui有，ant-design沒(méi)有，那我在用ant-design的table組件時(shí)，想要實(shí)現(xiàn)這兩個(gè)功能怎么辦？

答案是涼拌。既然它沒(méi)有，那就自己寫(xiě)，也就是二次封裝。

ok，先來(lái)實(shí)現(xiàn)這個(gè)屬性的功能：highlight-current-row。

highlight-current-row

首先，當(dāng)然是給定義prop變量：highlightCurrentRow；再定義一個(gè)另外一個(gè)prop變量currentRow。

然后在watch中監(jiān)聽(tīng)currentRow的變化，每次當(dāng)currentRow變化的時(shí)候，渲染一下上一個(gè)選中行和當(dāng)前選中行的樣式。

currentRow (val) {
   if (this.highlightCurrentRow) {
    this.renderRowStyleAfterRowClick(val)
   }
  }

highlightCurrentRow為true的時(shí)候，才需要渲染新的樣式。

renderRowStyleAfterRowClick：

// 選中某一行后，渲染表格行的樣式
  renderRowStyleAfterRowClick (currentRow) {
   const elements = document.getElementsByClassName('ant-table-row')
   const rowSelectionElement = document.getElementsByClassName('row-selection')
   // 獲取上一個(gè)選中行，并移除它的選中樣式
   if (rowSelectionElement.length > 0) {
    rowSelectionElement[0].classList.remove('row-selection')
   }
   // 給當(dāng)前選中行添加選中行的樣式
   if (elements.length > 0) {
    const rowList = [...elements]
    rowList.find(t => t.dataset.rowKey === currentRow.id).classList.add('row-selection')
   }
  }

代碼其實(shí)很簡(jiǎn)單：

先拿表格當(dāng)前頁(yè)的所有row元素（table組件沒(méi)有提供當(dāng)前點(diǎn)擊行的原生class）和當(dāng)前選中row元素。

如果當(dāng)前有選中的行，先移除這個(gè)之前添加過(guò)的css class 'row-selection'。

然后再給當(dāng)前選中行添class 'row-selection'。

那個(gè)這里就有疑問(wèn)了，我怎么樣才能找到當(dāng)前行呢？table組件并沒(méi)有提供當(dāng)前選中行的class（至少我沒(méi)有找到），所有我只能t通過(guò)class name 'ant-table-row' 拿到所有row, 然后再?gòu)闹姓页瞿惝?dāng)前點(diǎn)擊的那一行。

這個(gè)時(shí)候需要利用一個(gè)很關(guān)鍵的屬性： rowKey。

還記得ant-design table組件的api文件最后面的那個(gè)注意嗎？

這里提醒你，rowKey用來(lái)指定數(shù)據(jù)列的住建，也就是每一行的唯一標(biāo)志，那么好辦了。

我們引用table組件的時(shí)候，將rowKey設(shè)置為表格數(shù)據(jù)源的主鍵，這樣我們就能從元素中的dataset中獲取到rowKey，然后找出當(dāng)前點(diǎn)擊行。

rowList.find(t => t.dataset.rowKey === currentRow.id)

然后給這個(gè)元素動(dòng)態(tài)添加class ‘'row-selection'。

// 給表格添加懸停樣式和當(dāng)前點(diǎn)擊行添加選中樣式
.ant-table-row {
 &:hover > td {
  background-color: @background-color !important;
  color: #fff !important;
 }
 &.row-selection {
  background-color: @background-color !important;
  color: #fff !important;
 }
}

這里設(shè)置hover時(shí)行樣式和點(diǎn)擊時(shí)行樣式一樣，是為了不讓行點(diǎn)擊后，該行懸停時(shí)，出現(xiàn)其他不一樣的樣式。如果不想設(shè)置成一樣，可以單獨(dú)設(shè)置行點(diǎn)擊時(shí)的hover樣式和行點(diǎn)擊時(shí)的樣式一樣。

// 給表格添加懸停樣式和當(dāng)前點(diǎn)擊行添加選中樣式
.ant-table-row {
 &.row-selection {
  background-color: @background-color !important;
  color: #fff !important;
  &:hover > td {
    background-color: @background-color !important;
    color: #fff !important;
   }
 }
}

這樣，我們的目的就達(dá)到了。

在行點(diǎn)擊時(shí)，修改currentRow，table組件內(nèi)部通過(guò)watch監(jiān)測(cè)到currentRow的變化，就會(huì)觸發(fā)改變樣式的方法。

<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(斑馬紋行)

實(shí)現(xiàn)行的stripe功能，還是比較簡(jiǎn)單的。

添加prop 變量 stripe，在組件的update函數(shù)鉤子內(nèi)，調(diào)用實(shí)現(xiàn)斑馬紋的方法就可以了

 updated () {
  if (this.stripe) {
   this.renderStripe()
  }
}

實(shí)現(xiàn)斑馬紋的方式有多種，這里只展示期中一種：

// 對(duì)表格行進(jìn)行斑馬行格式顯示
  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的所有行，然后對(duì)其進(jìn)行隔行設(shè)置不一樣的行背景色，目的就達(dá)到了。

有其他更多方式的朋友歡迎補(bǔ)充。

以上這篇antd design table更改某行數(shù)據(jù)的樣式操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: