element表格動態列數據--根據返回值修改單元格顏色

先看效果實現：

需求

1，表格列根據後臺返回數據動態生成
2，紅框圈起來的兩行，後臺返回值例如：25%，-30%，‘/’，正數百分比顯示綠色並且後面帶上升箭頭，負數百分比顯示紅色並且後面帶上下降箭頭，返回‘/’不管

實現

1，首先看到這個需求指定想到了formatter這個屬性，然而它只能根據判斷加升下降的箭頭，並不能改變顏色
2，然後想到了:cell-style這個屬性，它可以修改單元格顏色，但是它需要超級複雜且無法動態的判斷來進行，判斷如下，這個過程簡直令人窒息：

if (column.property !=  "name") {
    var str = ''
    if (row.name == '同比增幅' || row.name == '環比增幅') {
        if(
            (parseFloat(row.month12) >0 && columnIndex == 12) ||
            (parseFloat(row.month05) >0 && columnIndex == 5)  ||
            (parseFloat(row.month06) >0 && columnIndex == 6)  ||
            (parseFloat(row.month07) >0 && columnIndex == 7)  ||
            (parseFloat(row.month08) >0 && columnIndex == 8)  ||
            (parseFloat(row.month09) >0 && columnIndex == 9)  ||
            (parseFloat(row.month10) >0 && columnIndex == 10) ||
            (parseFloat(row.month01) >0 && columnIndex == 1)  ||
            (parseFloat(row.month02) >0 && columnIndex == 2)  ||
            (parseFloat(row.month03) >0 && columnIndex == 3)  ||
            (parseFloat(row.month04) >0 && columnIndex == 4)  ||
            (parseFloat(row.month11) >0 && columnIndex == 11) 
        ){
            str =  'color: green;'
        } else {
            // isNaN(parseFloat(row.month11)) || isNaN(parseFloat(row.month12))
            if (
                (isNaN(parseFloat(row.month12)) && columnIndex == 12) ||
                (isNaN(parseFloat(row.month05)) && columnIndex == 5)  ||
                (isNaN(parseFloat(row.month06)) && columnIndex == 6)  ||
                (isNaN(parseFloat(row.month07)) && columnIndex == 7)  ||
                (isNaN(parseFloat(row.month08)) && columnIndex == 8)  ||
                (isNaN(parseFloat(row.month09)) && columnIndex == 9)  ||
                (isNaN(parseFloat(row.month10)) && columnIndex == 10) ||
                (isNaN(parseFloat(row.month01)) && columnIndex == 1)  ||
                (isNaN(parseFloat(row.month02)) && columnIndex == 2)  ||
                (isNaN(parseFloat(row.month03)) && columnIndex == 3)  ||
                (isNaN(parseFloat(row.month04)) && columnIndex == 4)  ||
                (isNaN(parseFloat(row.month11)) && columnIndex == 11) 
            ) {
                str = 'color: #ccc'
            } else {
                str = 'color: red;'
            }
        }
    }
}
return str

3，以上兩種結合起來便可以實現圖上的效果，但是，上面的代碼裏的判斷條件是死的，萬一後臺返回的數據列有即使上百呢，所以又研究了一下列裏面的插槽，完美解決：

<el-table
   :data="tableData"
    border
    style="width: 100%"
    highlight-current-row        
    :cell-style="getCellStyle"
    :header-cell-style="getHeaderCellStyle"      
    stripe
    >
    <el-table-column
        v-for="(item, index) in Columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :show-overflow-tooltip="true"
        >
         //  這裏是解決方法
        <template slot-scope="scope">       
        		//  判斷返回值是正數百分比&&只判斷後面兩行--字體綠色+上升箭頭
                <span style="color: green" v-if="parseFloat(scope.row[scope.column.property]) > 0 && (scope.row.name == '同比增幅' || scope.row.name == '環比增幅')">{{scope.row[scope.column.property]}}↑</span>
                // 判斷返回值負數百分比&&只判斷後面兩行--字體紅色+下降箭頭
                <span style="color: red" v-else-if="parseFloat(scope.row[scope.column.property]) < 0 && (scope.row.name == '同比增幅' || scope.row.name == '環比增幅')">{{scope.row[scope.column.property]}}↓</span>
                // 其他情況不加修飾
                <span v-else>{{scope.row[scope.column.property]}}</span>
        </template>
    </el-table-column>
</el-table>

這個問題搞了一天半，開始一直企圖利用cell-style實現，花的時間最久，最後實現了，但是代碼就很多且不靈活，最後用這個插槽的方式完美解決

學海無涯，學習是岸