iview使用之怎樣經過render函數在table組件表頭添加圖標及判斷多個狀態

  在實際項目開發中，咱們常常會用到各類各樣的表格，好比在表格中填加下拉菜單，按鈕，圖標及能夠根據狀態顯示對應文字等等，由於這段時間一直在作後臺管理系統，因此表格用的就比較多，固然UI組件庫我用的是iview,PRD(原型圖)上的表格要求要能夠判斷多個狀態及在表頭上添加圖標，在網上搜了一段時間發現比較少，因此寫好以後就想着分享出來給有須要的人蔘考參考，例以下面這種表頭帶圖標的：

這種表格相信你們都會以爲在iview裏有，，其實是沒有的，並且可能也會有人以爲經過iview的render函數就是添加，可是這只是想對了一半，對於iview表格組件的tbody部分確實是能夠經過render函數來進行修改，可是僅僅是針對tbody部分，對於表頭則是經過renderheader進行一個修改，具體代碼以下：

接下來就是關於iview表格多個狀態的判斷，，通常狀況下，咱們只須要對兩個狀態進行判斷，因此用簡單的三目運算符就能夠實現，但有時候可能會有多個狀態，好比我此次的項目，基本都是五個狀態，處理起來稍微麻煩一點，不過最終我仍是寫出來了，分享一下：

這裏面的status是後臺傳給你的狀態，到本身的項目對號入座就好了，而後是格外用了一個iview的Tag標籤，美觀一點，，哈哈，，效果以下：

在使用iview表格的時候還有一個問題須要注意，就是關於表格列寬自適應的問題，若是不是特別要求，建議不要給每一列設置寬度，這樣反而會致使表格在大屏或者小屏幕下出來空白的狀況，因此建議是不要設置固定寬度，就這樣，但願能夠幫到有須要的人，共勉！！！