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的所有行，然後對其進行隔行設置不一樣的行背景色，目的就達到了。

有其他更多方式的朋友歡迎補充。