在开发项目中遇到对
ant-table表格
数据进行单元格过滤标红
的需求,这个需求应该也是经常会遇到的吧,我不清楚你们哈,但我是经常遇到对数据各种各样的标红处理及过滤数据,脑子恨不得分成好几半都不够用,ant-Design
官网上有customCell
这个方法,这个也可以对单元格进行标红,个人感觉这个适用于根据单个属性或单个下标进行单个数据标红, 可以看到返回的只有当前行数据(record)、下标(index),但没有当前值(text)
对于所有数据进行统一标红,这个 customCell 方法是不适用的,满足不了需求,那么怎么解决呢,
ant-Design
官网里提供了另一个方法就是customRender
它的返回值是当前值(text)、当前行数据(record)、下标(index)
这个方法也可以对单元格数据进行标红,有 了当前值,会更好处理!
1.在动态列里添加 customRender 方法
hours.forEach((item=>{
column.push({ title: item, key: item, dataIndex: item, ellipsis:true,customRender:renderTextColorColumn });
}))
2.最主要的就是这两句代码,是不是很方便!一些过滤方法就不放了哈,你们根据需求进行调整;
//filterHoursData 过滤函数 return里函数是 对数据进行样式标红
const bool = filterHoursData(text,elementFilter.max, elementFilter.min, elementFilter.maxOperator, elementFilter.minOperator)
return h('span',{ style: { color: bool ? 'red' : 'black' } },`${text}`== 'undefined' ? '' : `${text}`)
3.下面放的是我这里需求的标红完整代码,当然你们不需要看这么多,看上面就可以,我这里记录下
const renderTextColorColumn = ({ text ,record}) => {
//要素判断
if(record.key!='cloudHigh' && record.key!='exRvr' && record.key!='cloud' && record.key!='rvr' && record.key!='rain' && record.key!=undefined){
const elementFilter = state.FeatureData[record.key];
//风向单位
if(elementFilter.unit){
return h('span',{ style: { color: findWdUnitData(text,elementFilter.unit) ? 'red' : 'black' } },`${text}`== 'undefined' ? '' : `${text}`)
}
const bool = filterHoursData(text,elementFilter.max, elementFilter.min, elementFilter.maxOperator, elementFilter.minOperator)
return h('span',{ style: { color: bool ? 'red' : 'black' } },`${text}`== 'undefined' ? '' : `${text}`)
}
//添加云高过滤判断
else if(record.key=='cloudHigh'){
const elementFilter = state.FeatureData['cloudHigh'];
const bool = filterHoursData(text,elementFilter.max, elementFilter.min, elementFilter.maxOperator, elementFilter.minOperator)
return h('span',{ style: { color: bool ? 'red' : 'black' } },`${text}`== 'undefined' ? '' : `${text}` )
}
//云况
else if(record.key=='cloud'){
const elementFilter = state.FeatureData['cloud'];
return h('span',{ style: { color: findCloudData(text,elementFilter.cloudlist) ? 'red' : 'black' } },`${text}`== 'undefined' ? '' : `${text}` )
}
//添加exRvr过滤判断
else if(record.key=='exRvr'){
let results = text.match('[0-9]+');
let exrRvrText='';
if(results!='' && results!=null){
exrRvrText = results[0];
}
const elementFilter = state.FeatureData['rvr']
const bool = filterHoursData(exrRvrText,elementFilter.max, elementFilter.min, elementFilter.maxOperator, elementFilter.minOperator)
return h('span',{ style: { color: bool ? 'red' : 'black' } },`${text}`== 'undefined' ? '' : `${text}` )
}
return text
}
- 最后在这里放一个效果图哈!
希望对你们有所帮助,如有问题也欢迎指正,感兴趣的话可以给点个关注,大家一起进步!