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

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

一、需求描述 ​

在使用FIneReport软件开发报表时，有一些业务需求是需要我们在单元格里展现一些彩色的tag标签来标记一些重点内容，其效果如下图所示： 针对以上需求，本文提出一种可行的方案，其大致步骤如下：

1. 将element-tag.css样式文件放入工程目录下，并在模板中引入改css文件。
2. 通过公式形态动态地使用html标签包裹住单元格中的值，并设置单元格以HTML形式展示。

注1：精简后的element-tag.css文件在本文档末尾下载。注2：本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证，如果您在使用其他版本过程中出现问题可以联系本作者。

二、具体步骤 ​

第一步 ​

下载element-tag.css样式文件，并保存到工程目录下，具体目录：webroot>help>css。 如果您是在决策报表中使用，需要在页面初始化的时候通过JS将css文件引入。具体操作为，点击右上角组件body->事件->添加事件->初始化后，并填入对应JS代码。 其中JavaScript代码如下：

$('<link rel="stylesheet" type="text/css" href="/webroot/help/css/element-tag.css"/>').appendTo('head');

$('<link rel="stylesheet" type="text/css" href="/webroot/help/css/element-tag.css"/>').appendTo('head');

第二步 ​

在模板中引入该css文件。具体操作为，点击左上角 模板->模板web属性->引入css->选中上一步的css文件并添加。

第三步 ​

选中需要添加tag标签的单元格元素，点击右上角 单元格属性->形态->公式形态，并填入拼接html标签的公式： 其中，填写的公式如下：

switch($$$,
"男","<span class='el-tag el-tag--dark'><span class='el-tag__content'>男</span></span>",
"女","<span class='el-tag el-tag--dark el-tag--danger'><span class='el-tag__content'>女</span></span>",
"未知","<span class='el-tag el-tag--dark el-tag--info'><span class='el-tag__content'>未知</span></span>")

switch($$$,
"男","<span class='el-tag el-tag--dark'><span class='el-tag__content'>男</span></span>",
"女","<span class='el-tag el-tag--dark el-tag--danger'><span class='el-tag__content'>女</span></span>",
"未知","<span class='el-tag el-tag--dark el-tag--info'><span class='el-tag__content'>未知</span></span>")

第四步 ​

点击右上角 其他->显示内容，选中用HTML显示内容。 完成以上步骤后，我们直接点击左上角的预览按钮，即可在浏览器中查看到与文章开头效果图类似的报表。

三、标签样式清单 ​

在使用不同样式的标签时仅需要替换掉元素中对应的class值即可。

下附element-ui支持的样式，如需拷贝使用，请下载示例模板。

四、模板及样式文件下载 ​

• 点击下载element-tag.css
• 点击下载单元格中使用elementui标签.cpt