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实现，花的时间最久，最后实现了，但是代码就很多且不灵活，最后用这个插槽的方式完美解决

学海无涯，学习是岸