快捷導(dǎo)航

Vue使用ElementUI動態(tài)修改table單元格背景顏色或文本顏色

更新時間：2023年02月06日 09:05:28 作者：小花皮豬

本文主要介紹了Vue使用ElementUI動態(tài)修改table單元格背景顏色或文本顏色，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

今天遇到一個場景，表格行屬性的字典項要針對不同的狀態(tài)，展示不同的文本顏色，如下圖所示：

賬號狀態(tài)這一欄，如果是正常就展示以綠色字體展示，如果是禁用就以紅色顏色展示

針對這個需求，我第一時間也是想到使用ElementUI提供給table的一個屬性：cell-style

官方是這么說明的：

簡單說明就是，我們給需要修飾的table一個cell-style屬性，它的值是一個回調(diào)函數(shù)，我們可以在回調(diào)函數(shù)里面進(jìn)行邏輯處理，增加style樣式

它的回調(diào)函數(shù)又四個參數(shù)，格式如下：

Function({<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->row, column, rowIndex, columnIndex})/Object

我實現(xiàn)我這個需求只用到了前兩個參數(shù)，下面進(jìn)行代碼演示。

給table增加cell-style屬性

首先給table增加cell-style屬性

<el-table  :data="userTableData"  highlight-current-row  border  stripe fit :cell-style="cellStyle"  >

修改一行顏色

如果想要一行都變成返回的style樣式，可以這么寫：

這里的顏色不止支持顏色編碼，而且支持顏色的單詞

這樣一行都是邏輯返回的樣式了

可以支持多個樣式,類似于style行內(nèi)樣式的寫法，比如：

但是這明顯不符合我的需求，我的需求是只讓賬號狀態(tài)進(jìn)行文本修飾，而不是一整行，所以需要使用下面這種。

只修改某個屬性顏色

如果不想讓一行都根據(jù)返回的style修飾

我們可以借助column獲取全部的行，然后某一行的lable屬性，用它進(jìn)行處理，比如這里我只想讓賬號狀態(tài)被返回的style修飾，就可以這么寫：

相關(guān)代碼如下：

 //改變表格某一列或者某一個單元格文本顏色 
    cellStyle({row, column, rowIndex, columnIndex}) {
      // 定義樣式變量
      let cellStyle;
      // 根據(jù)每一行的status屬性的值進(jìn)行判斷
      // 如果是正常就展示以綠色字體展示，如果是禁用就以紅色顏色展示
      switch(row.status) {
        // 0代表正常
          case 0:
            // 設(shè)置文本顏色 綠色 可以直接寫顏色編碼，也可以直接寫顏色的單詞
            cellStyle = 'color:#70DB93';
            break;
            // 0代表金禁用
          case 1:
            // 設(shè)置文本顏色 紅色
            cellStyle = 'color:red';
            break;
            // 如果有其他狀態(tài)，就默認(rèn)顯示，不給文本顏色
          default:
          cellStyle = '';
      }
        
        //return cellStyle  // 返回最終處理過的樣式 這樣寫就是讓全部行被style修飾
        // 返回最終處理過的樣式 只讓賬號狀態(tài)這個屬性的屬性被style修飾
         if(column.label == '賬號狀態(tài)'){
          return cellStyle
        }
    },

這樣就滿足了我的需求：