怎么樣使element ui 的table某列變色


第一步.在el-table里面加上:row-style="rowClass"

 <el-table
      :data="targetCarList"
      border
      fit
      v-loading.body="listLoading" 
      element-loading-text="拼命加載中" 
      style="width: 100%"
      :row-style="rowClass" >
</el-table>

第二步 再根據判斷來決定顏色的顯示

 rowClass (row, index) {
      if (this.statusActive === 'PURCHASE_OFFER') {
        row.offerNum = row.offerNum ? row.offerNum : 0
        if ((row.deployTimeTotal > 30 && row.deployTimeTotal <= 60) && row.offerNum === 0) {
          return { "background-color": "#FFDDAA" }
        } else if ((row.deployTimeTotal > 60) && row.offerNum === 0) {
          return { "background-color": "#FFCCCC" }
        }
      }   
    },

上面的row打印出來是每一列的所有數據,決定顏色變化的是 return { "background-color": "#FFDDAA" },如果沒有判斷是直接返回的。
因為row-style主要是 ----行的 style 的回調方法,也可以使用一個固定的 Object 為所有行設置一樣的 Style。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM