低代码表单控件全攻略：4 大类控件 + 属性配置，数据收集高效又精准

JNPF后台常收到类似疑问：“控件怎么设置必填？”“多端显示怎么配置？” 其实 “表单控件” 是数据收集的核心工具，JNPF 平台的 57 种控件分 4 大类，每种都有灵活的属性配置。今天把控件分类、核心属性和多端适配拆透，帮你快速选对控件、配好属性，避开表单设计的高频坑。

一、先明确：表单控件的 4 大分类与核心定位

表单控件按功能分为基础控件、高级控件、系统控件、布局控件，先记清分类和适用场景，避免选错控件影响功能：

简单说：基础控件管 “手动填简单数据”，高级控件管 “选系统数据或复杂数据”，系统控件管 “自动记系统数据”，选对类别才能实现联动、关联等功能。

二、核心操作：控件属性配置分步拆解（附实操案例）

选好控件后，需在右侧 “组件属性” 和 “组件样式” 中配置细节，核心属性按 “功能配置” 和 “样式配置” 拆分，重点看关键设置：

1. 功能配置：控制控件 “能不能用、怎么用”

功能配置决定控件的交互逻辑，比如是否必填、能否修改，常见属性如下：

• 控件字段：给控件绑定数据库表字段（如 “单行输入” 绑定 “user_name” 字段），点击 “+ 添加字段” 可新建字段，字段需唯一，绑定后数据才会存入对应表中；

• 控件标题：控件的名称（如 “姓名”“手机号”），默认是控件类型（如 “单行输入”），建议自定义成业务相关名称，方便用户识别；支持多语言翻译，切换系统语言后标题会自动变（如 “姓名”→英文 “Name”）；

• 显示标题：勾选则显示控件标题，取消则只显示输入框（适合空间有限的场景，如移动端）；

• 标题提示 / 占位提示：补充说明（如标题提示 “请填写真实姓名”，占位提示 “示例：张三”），同样支持多语言，避免用户填错；

• 默认值：控件的初始值（如 “日期选择” 默认今天，“单行输入” 默认 “待填写”），用户可手动修改；

• 是否必填：勾选后用户必须填该字段才能提交，未填会提示报错（行内编辑场景无效）；

• 是否只读 / 禁用 / 隐藏：只读：可见但不能改（仅 PC 端有效，APP 端无效），适合展示不可改的数据（如 “创建时间”）；禁用：可见但不能改，样式会变灰，比 “只读” 更明显；隐藏：控件完全不显示，适合按条件动态隐藏（如某些角色看不到 “薪资” 字段）；

• 脚本事件：支持 “change 事件”（控件值变化时触发，如输入手机号后校验格式）和 “blur 事件”（控件失去焦点时触发，如输入完成后自动填充关联数据），需写简单 JS 脚本，适合个性化交互。

避坑提醒：系统控件（如 “创建人员”）会自动获取当前用户信息，无需配置默认值，也不要设为 “必填”，避免冗余操作。

2. 样式配置：控制控件 “好不好看、怎么显示”

样式配置决定控件的视觉效果和多端适配，重点看 3 个关键属性：

• 控件栅格：调整控件在表单中的宽度，最小 2 格，最大 24 格（全屏），比如 “单行输入” 设 4 格，“日期选择” 设 6 格，实现多控件分栏展示；

• 标题宽度：控制控件标题的宽度，默认 100px，可手动输入调整（如标题长的 “紧急联系人手机号” 设 150px，避免换行）；

• 控件宽度：支持 “%” 和 “px” 两种单位，默认 100%（占满父容器），PC 端可设固定值（如 “手机号” 设 300px），APP 端建议用百分比适配屏幕；

• 多端显示：控制控件在 PC 端和 APP 端的显示状态：默认：两端都显示；仅 Web：只在 PC 端显示（如 “复杂子表” 不适合 APP 端）；仅 App：只在 APP 端显示（如 “扫码输入” 适合移动端）。

三、避坑要点：4 个常见问题解答

1. 控件绑定字段后，数据存不进数据库？先检查 “控件字段” 是否正确绑定表字段（字段名是否一致），再确认字段 “允许空” 设置（若设为 “不允许空”，需确保控件是必填且有值），两者有一个错就存不进数据。

2. “是否只读” 在 APP 端没效果？正常现象，“是否只读” 仅在 PC 端的表单页有效，APP 端会忽略该设置，若需 APP 端只读，建议用 “是否禁用”（APP 端也生效）。

3. 多语言翻译配置后，标题没变化？需在 “选择翻译标记” 中找到对应控件标题的翻译项（如 “姓名” 对应 “sys.form.name”），配置好繁体、英文等翻译后，切换系统语言才会生效，未配置则显示默认中文。

4. 高级控件 “组织选择” 选不了数据？大概率是当前用户没有该组织的查看权限，进入 “权限管理” 给用户角色添加 “组织查看权限”，刷新后就能正常选择。

表单控件配置的核心是 “先选对类别，再配好属性”：基础数据用基础控件，关联系统数据用高级控件，自动记录信息用系统控件，再根据多端需求调整样式。比如做 “员工入职表单”，用 “单行输入” 填姓名、“日期选择” 填入职日、“组织选择” 选部门、“系统控件” 记创建人，既高效又规范。如果遇到控件联动失效、样式适配差等问题，欢迎在评论区留言，我会帮你分析解决～