vue3+ts+ant-table横向表格数据实现对单元格过滤之后的数据进行标红

本文链接：https://blog.csdn.net/yujis/article/details/128037758

在开发项目中遇到对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
    }