You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何通过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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.27 18:39:28