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

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

最后在这里放一个效果图哈！

希望对你们有所帮助，如有问题也欢迎指正，感兴趣的话可以给点个关注,大家一起进步!

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

elementUI table 修改表格背景色，去除单元格底部横线
想把表格的背景设置成透明的,弄了很长时间表格是透明了,就是单元格的横线一直去不掉原图: 单元格带横线: 最终效果图: 这是实例代码: <template><div class=&q ...
EXcel表格，下拉单元格自动实现按照8进制递增，如I0.1；0.2等
#第一步新建EXcel #第二步,在A1单元格输入=:并保持输入状态 #第三步,输入公式公式是:"I"&TEXT((INT((ROW()-1)/8)+MOD(ROW()- ...
让单个单元格显示两个数据
让单个单元格显示两个数据开发工具与关键技术:Visual Studio 2015 作者:李德新撰写时间:2019年6月12日在我们的学习过程中,都会要使用到许许多多的表格,而且这些表格各有各的特 ...
elementUI中，实现一个单元格内显示两行数据，并用其中一个数据进行排序。
最近在公司中,有这样一个需求,表格中,一个单元格里面显示两行数据,并且可以使用其中一行进行排序,其中数据的样式也要实时变动.类似于下图这样的话,elementUI中自带的prop就不适合了.所以,需 ...
layui一个单元格展示两个数据
layui 数据表格如何在同一个单元格展示两个数据? 参考: https://fly.layui.com/jie/44006/ 起作用代码,还可以进行排序: { field: 'telephone', ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
【HTML】Angular JS + Table 根据数据动态合并单元格
问题描述: 根据数据值将单元格合并如一级指标二级指标原始演示效果: 目标效果如图所示: 完整的http.post请求JS $http.post('../hnTProF3c/List', para ...
table、tr、td表格的行、单元格等属性说明
<table>标签定义HTML表格.简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元素定义表头,td元素定义表格单元格. <ta ...
ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...

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

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

最新文章

热门文章