【Web前端问题】antd table 根据条件改变列中文字的颜色

Z时代
2024-01-10
分类：技术分享

我表格个中的年月日正好是现在的年月日的时候字体变为蓝色
startMonth是开始的月份
if(nowYear==year && nowMonth == i)这个里面葛i变字体的样式图片描述
当前时间正好和第一个年月相同的时候字体是蓝色的！请教大神怎么做？在这if中这么写？

for(let i = startMonth;i < endMonth + 1;i++){
            let monthColumns = {
                title:year + "年"+ i + "月",
                className:'year'+i
            }
            let extendColumns = [];
            if(this.state.value1=="2"){
                period = false;
            };
            if(this.state.value2 == "2"){
                openTired = false;
            };
            if(period){
                if(isPlan){
                    extendColumns.push({
                        title: '计划(当期)',
                        className: 'planNow' +i,
                        dataIndex: i+'_plan_current',
                        width: 50,
                    }, {
                        title: '%(当期)',
                        className: 'plan'+i,
                        dataIndex: i+'_plan_current_percent',
                        width: 50,
                    });
                }
            }else{
                if(isPlan){
                    extendColumns.push({
                        title: '计划(开累)',
                        className: 'planNow' +i,
                        dataIndex: i+'_plan_total',
                        width: 50,
                    }, {
                        title: '%(开累)',
                        className: 'plan'+i,
                        dataIndex: i+'_plan_total_percent',
                        width: 50,
                    });
                }
            };
            if(openTired){
                if(isFinished){
                    extendColumns.push({
                        title: '完成(当期)',
                        className: 'doneNow'+i,
                        dataIndex: i+'_current',
                        width: 50,
                    }, {
                        title: '%(当期)',
                        className: 'done'+i,
                        dataIndex: i+'_current_percent',
                        width: 50,
                    });
                }
            }else{
                if(isFinished){
                    extendColumns.push({
                        title: '完成(开累)',
                        className: 'doneNow'+i,
                        dataIndex: i+'_total',
                        width: 50,
                    }, {
                        title: '%(开累)',
                        className: 'done'+i,
                        dataIndex: i+'_total_percent',
                        width: 50,
                    });
                }
            };
            if(nowYear==year && nowMonth == i) {
                //当前时间和选择时间相同时 对应列的数字变蓝色
                //这里操作的真实的DOM  （需要优化 操作虚拟的DOM）
                $(".planNow"+i).css("color","blue");
                $(".plan"+i).css("color","blue");
                $(".done"+i).css("color","blue");
                $(".doneNow"+i).css("color","blue");
                $(".year"+i).css("color","blue");
                debugger
            }
            monthColumns.children = extendColumns;
            newColumns.push(monthColumns);
        }

回答：

开以不操作DOM，直接通过添加类名，设置css控制

...
let highlight = "";
if(nowYear==year && nowMonth == i) {
    highlight = " highlight"
}
let monthColumns = {
                title:year + "年"+ i + "月",
                className: "year" + highlight
            }
 下面需要添加className的地方把 i 都换成 highlight
css:
.highlight{
    color: blue
}