适用场景
适合按余量、状态等条件改变颜色或显示值；不适合改变数据源本身，业务计算和权限判断仍应在数据层完成。
最终效果
余量大于 10 时数字显示为红色；“标识”字段把 1 显示成“√”，把 0 显示成“×”，与本页原文截图的规则一致。
本例功能
- 条件属性改变字体颜色
- 条件属性通过 newValue 替换显示值
- 保留原始数据用于判断
最小数据集
| 字段 | 类型 | 用途 |
|---|---|---|
| 物料 | 文本 | 明细 |
| 余量 | 带单位文本 | 提取开头数字后做条件判断 |
| 标识 | 0/1 | 显示值转换 |
[
{ "物料": "纸箱", "余量": "18盒", "标识": 1 },
{ "物料": "胶带", "余量": "6卷", "标识": 0 }
]
报表结构设计
A1:C1 为“物料、余量、标识”表头，A2:C2 为纵向明细。B2 承担颜色条件，C2 承担显示值转换。
数据绑定
物料、余量、标识依次绑定 A2:C2；B2:C2 左父格设为默认。条件表达式只读取当前 B2 的 $$currentValue，先提取“18盒”开头的数字，再判断是否大于 10。
关键配置
配置路径：单元格属性 → 条件属性；单元格属性 → 扩展。
- 完成 A2:C2 纵向扩展后选中 B2，打开“条件属性”，添加颜色条件并选择红色。
- 在条件编辑框使用原文示例的表达式；它兼容“18盒”这类带单位文本：
function matchFirstNumbers(str) {
const match = str.match(/^\d+/);
return match ? match[0] : null;
}
const count = matchFirstNumbers($$currentValue);
if (count && count > 10) {
return true;
} else {
return false;
}
- 选中 C2，再添加条件属性；当前值为 1 时返回
{ newValue: "√" }，为 0 时返回{ newValue: "×" }，保持原值作为其他情况的兜底。 - 先在数据集预览中确认余量以数字开头；条件属性只改变最终显示，不修改源数据。
预览验证
- 纸箱“18盒”和气泡袋“14包”的余量大于 10，应显示红色；胶带“6卷”不变色。
- 纸箱标识显示“√”，胶带标识显示“×”。
- 将某条余量改成“10盒”时不应标红，改成“11盒”时应标红。
常见错误
- 小于 10 的余量变红 → 比较方向写反 → 使用原文规则
count > 10。 - 仍显示 0/1 → 返回对象没有使用 newValue → 检查属性名和返回分支。
- 带单位余量无法比较 → 直接对整段文本做数值比较 → 先用
matchFirstNumbers提取开头数字。