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，以上两种结合起来便可以实现图上的效果，但是，上面的代码里的判断条件是死的，万一后台返回的数据列有即使上百呢，所以又研究了一下列里面的插槽，完美解决：

    
         //  这里是解决方法
        
    

这个问题搞了一天半，开始一直企图利用cell-style实现，花的时间最久，最后实现了，但是代码就很多且不灵活，最后用这个插槽的方式完美解决

学海无涯，学习是岸