使用计算属性名可动态聚合多源字段，通过配置化映射、类型容错与聚合器驱动实现低代码看板的灵活字段合并。
在低代码数据看板中，当需要从多个 Generator（如不同 API 接口、数据库查询或 Mock 数据源）拉取字段并统一展示时，直接硬编码字段名容易导致维护困难、命名冲突或动态字段缺失。使用 计算属性名（Computed Property Names） 是一种轻量、灵活且符合 Vue/React（配合 Proxy 或 Hooks）等主流框架习惯的解决方案，它让字段合并逻辑可配置、可复用、可追溯。
用计算属性名动态拼接多源字段键
Generator 源通常返回结构类似但前缀/命名空间不同的对象，例如：
genA: { revenue: 12000, user_count: 850 }
genB: { rev_last_month: 11200, users_last_month: 790 }
genC: { income_q1: 35000, active_users_q1: 2400 }
不推荐手动写死 data.revenue + data.rev_last_month + data.income_q1。应定义一个映射规则，再用计算属性名生成统一字段：
- 声明字段映射表：
const fieldMap = { totalRevenue: ['revenue', 'rev_last_month', 'income_q1'] } - 在 computed / useMemo 中遍历 map，用方括号语法动态读取各 source 对应字段：
[key]: sources.map(s => s[field]).reduce((a, b) => a + (b || 0), 0) - 结果得到响应式字段
totalRevenue，自动聚合三源数值
结合 Schema 配置实现低代码字段编排
真正低代码的关键是把“合并逻辑”外化为 JSON Schema。例如看板配置项中定义：
{
"mergedField": "totalSales",
"sources": [
{"generator": "salesApi", "field": "current"},
{"generator": "crmSync", "field": "booked"},
{"generator": "financeMock", "field": "confirmed"}
],
"aggregator": "sum"
}
运行时解析该配置，用计算属性名创建字段：
- 对每个
sources条目，从对应 Generator 实例取值：generators[genId][fieldName] - 用
[config.mergedField]作为键名，赋值聚合结果 - 支持多种聚合器（sum / avg / max / concat），通过
aggregator字段驱动行为
处理字段类型不一致与空值容错
多源字段可能类型混杂（字符串数字、null、undefined、甚至嵌套对象）。计算属性名本身不解决类型问题，但可自然包裹校验逻辑：
- 在 getter 内部统一转 number：
Number(val) || 0，避免"100" + null → "100null" - 对非数值字段（如状态标签），用
Array.from(new Set(...))去重合并 - 添加 fallback 策略：某源超时/报错时，跳过该源而非中断整个计算
- 字段名可带元信息，如
`${key}_raw`保留原始值，`${key}_computed`存聚合结果
Vue 3 / React + Zustand 示例片段
Vue 3 setup script 中：
const mergedData = computed(() => {
const result = {}
configList.forEach(({ mergedField, sources, aggregator }) => {
const values = sources
.map(({ generator, field }) => generators[generator]?.[field])
.filter(v => v != null)
result[mergedField] = aggregator === 'sum'
? values.reduce((a, b) => Number(a) + Number(b), 0)
: values
})
return result
})
React + Zustand 中可在 store 的 create 内用 get() 动态读取多个 slice，并用 [key] 构建派生状态对象，同样保持字段名完全动态可控。
