低代码表单渲染时如何动态控制字段显隐?

长孙东芳 阅读 49

我在用低代码平台做 Form Render,现在有个需求:当用户选择“其他”选项时,才显示一个输入框。但我不太清楚怎么在不破坏表单结构的情况下动态控制字段的显示和隐藏。

我试过直接在 schema 里加 visible 条件,但好像没生效。下面是我现在的配置代码:

const schema = {
  type: 'object',
  properties: {
    reason: { type: 'string', enum: ['请假', '出差', '其他'] },
    otherReason: { 
      type: 'string',
      title: '其他原因',
      visible: "{{formData.reason === '其他'}}"
    }
  }
};

结果 otherReason 字段一直显示,条件判断好像没起作用,是我写法不对吗?

我来解答 赞 5 收藏
二维码
手机扫码查看
1 条解答
Mr-庆玲
Mr-庆玲 Lv1
问题是你用错了字段名,Xrender 框架里动态显隐要用 x-visible 而不是 visible

直接这样改:

const schema = {
type: 'object',
properties: {
reason: { type: 'string', enum: ['请假', '出差', '其他'] },
otherReason: {
type: 'string',
title: '其他原因',
'x-visible': "{{formData.reason === '其他'}}"
}
}
};


如果是 Formily 体系,用 Reactions 配合 field 的 visible 属性实现。
点赞
2026-03-17 09:00