快捷導(dǎo)航

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

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

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

前言

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

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

針對(duì)這個(gè)需求，我第一時(shí)間也是想到使用ElementUI提供給table的一個(gè)屬性：cell-style

官方是這么說(shuō)明的：

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

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

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

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

給table增加cell-style屬性

首先給table增加cell-style屬性

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

修改一行顏色

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

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

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

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

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

只修改某個(gè)屬性顏色

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

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

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

 //改變表格某一列或者某一個(gè)單元格文本顏色 
    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  // 返回最終處理過(guò)的樣式 這樣寫就是讓全部行被style修飾
        // 返回最終處理過(guò)的樣式 只讓賬號(hào)狀態(tài)這個(gè)屬性的屬性被style修飾
         if(column.label == '賬號(hào)狀態(tài)'){
          return cellStyle
        }
    },

這樣就滿足了我的需求：

總結(jié)

到此這篇關(guān)于Vue使用ElementUI動(dòng)態(tài)修改table單元格背景顏色或文本顏色的文章就介紹到這了,更多相關(guān)Vue Element table背景顏色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: