elementUI中如何根據單元格的值設置背景色長度

效果圖如下

 

 PS：我這里的基數是190000，所以190000的單元格背景色是滿的

其實很簡單，我試了試template發現無法使用:formatter了，所以就去掉了template

然后看了看官方文檔，發現了華點，就是這個

 :cell-style="addClass2"

把他放在el-table里面

然后在函數中使用

addClass2({row,column,rowIndex,columnIndex}){
            for(let i=0;i<43;i++){
                for(let j=1;j<21;j++){
                    if(rowIndex=== i && columnIndex===j){
                        if((row.local1!== '' && column.label=='本1')){
                            let scc =  ((row.local1/190000)*100)
                             return{
                                background: "linear-gradient(90deg,#96d7f9 "+scc+'%'+",transparent 10%)"
                                };
                        }
}

這里的local1是我設置的字段，可以修改，通過判斷是否為空獲取到列數，然后再通過表頭的label獲取到第幾行，兩個都確定之后就可以確定到固定的值了

再通過拼接字段改變背景色就行了，這里有一個坑，就是不能使用backgroundSize，當然也有可能是我寫錯了，所以我使用了白色加顏色漸變

這樣就可以啦