element表格动态列数据--根据返回值修改单元格颜色

你的名字 2023-02-13 08:53 30阅读 0赞

先看效果实现：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]

## 需求 ##

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

学海无涯，学习是岸

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200528104027481.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70