微信公众号：次世代数据技术 关注可了解更多的教程。问题或建议，请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号：weibw162

本教程视频讲解可以关注本人B站账号进行观看：次世代数据技术

一、需求描述 ​

我们在实际报表开发中，有这样一种需求，就是希望我们可以在表格内容右上角展示一个圆点提示或者带数量的标记。

本方案的实现步骤如下：

1. 将下载好的element-badge.css文件存放到工程目录中。
2. 单元格通过公式将内容与HTML元素包裹。
3. 单元格设置HTML展示。

注1：不支持移动端使用。注2：本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证，如果您在使用其他版本过程中出现问题可以联系本作者。

二、具体操作 ​

第一步 ​

将下载好的element-badge.css文件存放到工程目录下，具体路径为：webroot->help->css。

第二步 ​

在模板web属性中引入CSS文件，具体操作过程如图。

第三步 ​

选中需要添加标记的单元格，然后点击单元格属性->形态，选择公式形态，然后填入如下公式即可： 公式如下:

"<div class='el-badge item'><span style='margin-right:10px'>"
+$$$
+"<span><sup class='el-badge__content el-badge__content--"
+if(C2<10,"success",if(C2<100,"primary","danger"))
+" is-fixed'>"
+C2
+"</sup></div>"

"<div class='el-badge item'><span style='margin-right:10px'>"
+$$$
+"<span><sup class='el-badge__content el-badge__content--"
+if(C2<10,"success",if(C2<100,"primary","danger"))
+" is-fixed'>"
+C2
+"</sup></div>"

此公式的逻辑就是如果当前C2单元格内的值小于10时显示绿色，小于100显示蓝色，超过100显示红色。

第四步 ​

将上一步选中的单元格的显示内容调整为用HTML显示内容。

按照以上步骤配置完后，点击预览即可看到我们需要的效果。

三、模板文件下载 ​

扫码即可下载文档示例模板及其他代码文件 如果您在阅读或实际操作过程中有问题，可以随时添加作者好友进行咨询。