el-table單元格樣式更改

前幾天遇到一個關於el-table表格樣式的問題一直沒解決 

由於在el-table-column加樣式並不生效因此更改起來比較麻煩

後來了看來element官方文檔和在一些關於此方面的博客，使用了一個比較笨的方法解決了問題

問題以下：我想要未開藥品的字段的樣式爲灰色

 

 

 

 效果以下

 

 

 解決方案以下：

首先在el-table中加入cell-style

 <el-table  :cell-style="set_cell_style" >

對於cell-style官方文檔解釋以下

 

 

 而後在method方法中寫上方法

 set_cell_style({row, column, rowIndex, columnIndex}){
      console.log(row,"row")
        if (column.label === '時間'){
        return 'color:black'
    }
       if (column.label === '序號'){
        return 'color:black'
    }
//這裏的medicalCommonName指的是在el-table-column定義的prop中的值
      if (row.medicalCommonName === '未開藥品'){
        return 'color:lightgray'
    }
    },

思路就是先讓不須要改變的列字體變爲黑色，由於第三個if會使得整行的字體變爲灰色，因此要先把列變爲黑色。這裏的優先級跟if的前後順序有關，越先定義優先級越高，因此這裏定義的順序挺重要的。

雖然這種方法有點笨但最後仍是可以解決問題的，不知道有沒有更好的方法。