如何通过displayProperty字段在chip中展示schema的多个值?
使用
displayProperty展示schema多个值的实现方案 原生schema的displayProperty配置项仅支持接收单个属性名字符串,没有官方的多字段直接配置能力,可通过以下两种稳定方案实现chip多值展示:
- 方案1:新增专用展示计算属性
不需要改动原有业务字段,在schema的properties中新增一个仅用于展示的计算字段,在字段计算逻辑中拼接需要展示的多个目标字段值(可自定义分隔符、前后缀格式),最后将displayProperty指向这个新增的计算字段即可。
参考实现:
该方案兼容性最强,不依赖特定渲染库的扩展能力,后续调整展示规则仅需修改计算字段逻辑,维护成本低。const userSchema = { type: 'object', properties: { deptName: { type: 'string' }, userName: { type: 'string' }, userId: { type: 'string' }, // 专门供displayProperty调用的展示字段 chipLabel: { type: 'string', compute: (item) => `[${item.deptName}] ${item.userName}(${item.userId})` } }, displayProperty: 'chipLabel' } - 方案2:自定义chip组件渲染逻辑
如果当前使用的JSON Schema渲染库支持插槽/自定义组件覆写,可以直接跳过displayProperty配置,在chip的自定义渲染函数中读取当前条目的全量字段,自由组合多个字段值完成渲染。
该方案灵活度最高,但和所用渲染库的API强绑定,升级库版本时需要额外校验自定义逻辑的兼容性。
注意:不要尝试直接给
displayProperty传入数组、空格/逗号分隔的多字段字符串,目前主流schema渲染实现均不支持该写法,会导致字段读取失败、展示内容为空。
内容的提问来源于stack exchange,提问作者Eric Koleda
相关产品推荐
相关产品推荐

