尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

宜搭下拉单选进阶:动态数据源、字段联动与远程搜索实操指南

宜搭下拉单选进阶:动态数据源、字段联动与远程搜索实操指南 最近在给团队做低代码培训时发现很多人卡在了“下拉单选”这个看似不起眼的组件上。有人觉得它太简单不就是选一个选项嘛有人则完全搞不懂动态数据源怎么配一遇到联动就挠头。等到真正做考勤统计、工单分配、商品分类这类带层级或条件筛选的表单时才发现下拉单选玩不转整个应用都卡壳。这篇文章就从我实际开发宜搭应用的经验出发把下拉单选从入门到进阶、从静态到动态、从单表到跨应用联动的完整玩法拆开讲清楚顺便把我在高级认证复习时踩过的坑也一并列出来希望能帮你少走弯路。1. 先搞清楚下拉单选到底解决什么问题1.1 从用户输入习惯说起表单设计的本质是尽可能降低填写成本同时保证数据规范统一。在宜搭里输入类组件有好几种单行文本、单选、下拉单选、下拉多选、级联选择等。很多新手会有疑问“单选按钮组也能选一项为什么还要用下拉单选”这个问题的答案藏在交互场景里。当可选项超过6个时单选按钮组的纵向排列会占掉大量页面空间且视觉上非常拥挤。下拉单选把选项收进一个折叠区域点击展开、选中收起交互路径更短表单更清爽。比如员工信息表里的“所属部门”少则五六个部门多则十几个用下拉单选远比一排排的单选按钮舒服。从数据规范的角度看下拉单选还有一层“隐性约束”的作用。用户不能随意输入一个不存在的值只能在预设范围内选从根本上杜绝了“部门名称写法不统一”这类脏数据问题。哪怕同一部门有人写“技术部”、有人写“技术研发部”只要下拉选项里只有一种叫法入库数据就是干净的。1.2 宜搭里下拉选与单选组/下拉多选的边界在具体选型时我是这么判断的选项数量少、且需要全部可见便于对比时比如性别、婚姻状态用“单选按钮组”。选项数量多、页面空间有限时部门、城市、职级用“下拉单选”。需要一次选择多个值时擅长技能、关注领域用“下拉多选”。数据存在层级关系、需要逐级选择时省市区、产品分类用“级联选择”。这里有个常见误区级联选择不适用于“父子相互独立”的场景。比如你要选“员工”和“该员工所属部门”员工和部门之间虽然是归属关系但如果你在下拉里做父子联动会受到权限、数据过滤条件等多重限制配置起来非常绕。直接用两个独立的下拉单选再通过“字段联动”或“关联填充”把部门自动带出来效果反而更好。2. 下拉单选的三类数据来源一次看懂2.1 静态选项最快上手的标准姿势我见过不少人说起“静态选项”就一脸不屑其实不然。静态选项适合稳定性极高、不太随业务变动的数据如性别、证件类型、报销类型等。配置路径非常直观在组件右侧属性面板中切换到“选项区”选择“静态数据”然后逐条添加选项名称和值。静态数据虽然简单有两个细节值得留意设置默认值时默认值必须匹配“选项值”而非“选项名称”。比如你配置了一个选项名称叫“在职”但值设成了“on-job”那默认值就要写“on-job”不是“在职”。选项值与名称建立映射关系后如果后期修改了值而不修改名称历史数据的展现会受影响。因为宜搭表单里存储的是值页面上显示的是名称。值一旦变了旧记录再打开对应的名称可能就找不到了。静态数据在渲染性能上最优不需要发网络请求打开表单即见选项。但它的最大短板是修改要进应用编辑态、重新发布对于管理后台维护的场景并不友好。2.2 动态选项关联已有表单数据实际项目中80%以上的下拉单选都应该用“动态数据”。所谓动态数据指的是下拉的选项来自某张表单里已经录入的一条条数据。最典型的场景选择客户名称时下拉选项来自客户信息表里的全部客户记录。配置路径也不复杂选项区切换到“动态数据”数据源类型选择“表单数据集”然后选择目标表单再设置“选项值”取目标表单的哪个字段、“选项名称”取哪个字段。更精细一点的做法是把目标表单作为数据源再通过过滤条件限制范围比如只看“启用状态启用”的客户。动态数据的核心价值在于数据的唯一源头。客户信息在客户表里统一维护其他各表单引用这份数据从根上避免了重复录入和不一致。这也体现了宜搭作为低代码平台的核心思路表单即数据库引用即关联。2.3 选项来自自定义数据源跨应用拉数据动态选项的灵活度更高一层是配置“自定义数据源”。自定义数据源可以选择当前应用的其他表单也可以选择跨应用的数据。这个功能适合报表类或集成类场景比如ERP系统里的物料编号不可能在宜搭里重建一张表维护直接从集成接口或已有业务表里拉取最合适。配置自定义数据源需要写一些配置项基本逻辑是定义请求地址、请求参数然后解析返回结果从中提取选项值和选项名称。对普通业务人员来说有一定门槛但对会一点JSON解析的开发同学来说非常顺手。在实际交付项目里我有时会用服务端“自定义连接器”来对接企业内部API把下拉选项的数据来源指向连接器。这种方式的好处是数据实时性极高且权限校验在API层完成安全可控。3. 核心实操字段联动与选项过滤3.1 联动逻辑的本质下拉单选真正的威力在于联动。最常见的一个联动场景是先选“省份”再选“城市”城市下拉的选项取决于省份选择。在宜搭中实现这类联动有好几种做法最基础的一版是使用“字段联动”功能。比如省份下拉选择“浙江省”后城市下拉的“关联表单数据”里过滤条件自动带上“省份等于当前表单里的省份值”。举个例子假设你有一张“行政区划表”字段包括省、市、区你希望在表单里选中省后市的下拉只列出该省的城市。那么市下拉的选项区配成动态数据数据源选行政区划表选项名称和值都取“市”字段过滤条件设置为“省等于表单字段.省份下拉”。关键步骤在于“省等于”后面的值来源要选择“当前表单里的省份字段”这样联动关系才真正建立起来。3.2 数据联动 vs 组件联动这里要格外区分一个概念组件联动和数据联动。组件联动常见的“显示/隐藏”“启用/禁用”偏交互层面的控制。数据联动也就是说一个组件的选中值如何影响另一个组件的选项范围或默认值。下拉单选的高级玩法大多属于“数据联动”配置在两处被联动组件的“过滤条件”中表单提交后的“数据联动”动作里比如选中客户后自动带出联系人、电话、币种、税率等字段。很多初学者只做了组件联动比如让城市下拉隐藏却没有设置数据联动导致城市下拉里所有城市都能选没有任何过滤效果这就不算完成了一次真正的联动配置。3.3 实践案例新增“按当前登录人过滤选项”还有一种常见的过滤需求是数据权限控制。比如销售填单时下拉单选只能选自己名下的客户。这种场景就不能只在选项区配过滤条件了因为条件里的对比值是动态的跟当前登录人有关。宜搭提供了“当前登录人”这个内置变量在过滤条件里可以直接引用。具体做法动态数据数据源选客户表选项值/名称分别取客户ID和客户名称过滤条件设置为“销售负责人等于当前登录人”。这样每个销售打开表单时下拉里只有属于自己的客户。这个方案比给用户都配置数据范围权限要轻量得多。权限是平台层的事而过滤条件是数据层的事在表单场景下后者更容易控制也更灵活。如果配合“成员字段”按部门过滤还能做出“只能选本部门员工”的效果。4. 实操中绕不开的细节默认值、校验与排序4.1 默认值的三种来源下拉单选的默认值设置表面上是“选一个初始项”这么简单实际有三种来源工作里都有用武之地固定值不管谁打开表单都默认选中某一个值比如“默认状态新建”。当前登录人在员工相关的下拉里如果业务上默认是处理人自己可以配成“当前登录人”。数据联动带出比如选完客户后客户默认对应的销售人员由联动规则写入销售字段。不要小看这种“被动式默认值”它比用户自己选更准确还能防呆。设置默认值要注意匹配关系尤其是引用第三方数据的时候。因为动态数据选项中选项值通常是一个主键ID或业务编号肉眼根本看不出来对应哪条记录。我习惯在开发阶段先用“预览”模式打开表单看真实返回的选项再回到设计态填入正确的默认值。4.2 下拉单选里做手机号校验的特殊姿势有朋友看到热搜词里有“宜搭表单手机号验证”会问下拉单选跟手机号验证有什么关系这里其实是两类不同的使用场景。第一种下拉动态选项的数据表里有一列叫“手机号”你希望在选中某个名称后表单里自动显示对应的手机号。这种情况通常要配合“文本组件”或“关联填充”来做。第二种表单里有一个“手机号”字段是单独的单行文本输入框但候选人的来源是从一个下拉单选里选的。这时需要校验的是“下拉选中后带出来的手机号是否规范”。宜搭的表单校验里提供了“正则表达式”校验能力可以给文本组件配置手机号正则。但如果你只是在下拉单选里做了一个选项又想对这个选项填的内容做格式校验例如选项里存的是手机号那么更合理的做法是把“手机号”从选项里拿掉改成文本输入利用“关联填充”从数据源里带出再做正则校验。下拉单选本身的校验只有“是否必填”没有“格式”校验这是组件定位决定的也是容易踩坑的地方。4.3 选项顺序与排序问题静态选项的排序就是你在配置面板里的顺序但动态数据的排序不少同事容易忽略。动态数据的下拉选项默认按数据集的记录顺序展示如果想要按某个字段排序需要在数据源配置里指明排序字段。实操中最常见的一个问题下拉选项里出现了大量停用或历史数据。虽然可以在过滤条件里加上“状态启用”但需要每次新建下拉都重复配置。更聪明的做法是在目标业务表单里维护一个“是否启用”字段下拉通用配置都加上这个过滤这样既灵活又不会遗漏。5. 跨表单填充与高级认证考试要点5.1 跨表单自动填充从“选”到“带”下拉单选选了个值往往只是业务的起点。比如选了客户后面需要带出客户联系人、电话、地址、信用额度选了物料后面需要带出规格、单位、单价。这些后续字段如果全靠人工填既慢又容易错。在宜搭里实现“选择后自动带出”有两种做法数据联动在表单设置里的“数据联动”选项卡新增一条联动规则触发组件是下拉单选目标表单是数据源表映射要带出的字段。缺点是一对多映射时需要多写几条规则配置稍显繁琐。关联填充直接把联动组件切换成“关联填充”类型的组件它的值字段是一个关联ID其他展示字段会自动加载出来。这种方式对展示很友好但不够灵活因为关联填充本质上是一张关联子表的感觉字段映射方式没有数据联动那么广。我在多数订单类应用中偏向用数据联动因为它的配置更直观且可以跨应用引用。在映射字段时要把“手动可编辑”选项关掉防止用户把关联带出的值改坏。5.2 宜搭低代码高级认证里那些易错的选择题不少人问“宜搭低代码高级认证选择题”怎么刷。就拿下拉单选这个知识点来说考试里经常出现的易混淆点集中在下面几个维度单选组和下拉单选的适用场景区分选项数量、页面空间。静态数据与动态数据的区别以及动态数据的数据源优先级。选项值存储的是“值”而非“名称”修改值会影响历史数据。数据联动字段的触发时机值变更时触发和取消触发方式。下拉选项来自联表数据时需要先在“数据源管理”里建好关联关系。每次看到备考的同学在“选项名称和选项值”上面丢分我都觉得可惜。因为考题不会直接问“名称和值有什么区别”而是用一句案例分析让你判断某字段选项名称在页面显示正常但报表里导出的是编号为什么其实答案就是页面展示名称底层存的是值这是数据存储的底层逻辑决定的。5.3 性能与大数据量下的选项加载当数据源表里记录上万条甚至更多时下拉单选会出现一个体验问题打开下拉所有数据一次性加载变得很卡。高级认证的考点里也会涉及这个场景标准答案是“使用远程搜索”。宜搭的动态下拉在数据量较大时需要开启远程搜索功能。开启后用户必须输入关键字系统再按关键字请求数据源而不是打开就把全部数据拉下来。这在员工超过500人的企业里尤其重要不然每次打开表单都白等一下午。远程搜索的条件设置要点在“动态数据”数据源配置里找到“远程搜索”的选项开启并选择“选项值”和“选项名称”中参与匹配的字段。少了这一步远程搜索是不会生效的。搜索条件里字段的类型也要关注如果字段是数字类型搜索时会原样传入字符串可能导致匹配不到这时要做数据转换或改选文本型字段。6. 常见问题排查清单做宜搭应用久了多少会碰到一些低级但折腾人的问题。这里整理一份下拉单选的排障速查表建议收藏。症状可能原因解决办法下拉里是空的什么都没有动态数据源未返回数据或过滤条件把数据全滤掉了先去掉过滤条件逐步排查确认数据源表单有数据且已发布选择后页面一直转圈数据源跨应用无权限或连接器接口超时检查跨应用数据权限、连接器耗时尝试缩小过滤范围显示的名称不对选项名称字段选错或主键取成了名称在选项配置里重新指定选项名称对应的字段关联带出的值没显示未配置数据联动映射或映射字段类型不匹配检查映射字段类型数值型字段不能映射到文本型选择项远程搜索无反应未开启远程搜索或配置了但字段不匹配进入动态数据高级配置开启并指定搜索字段默认值没有生效默认值填成了名称而非值先预览获取当前选项的真实值再回填默认值排查的通用口诀是先看数据、后看配置、再看权限。数据源表单是否有数据、当前登录人是否有权限查看这份数据这两点基本能解决80%的下拉为空问题。再补充一个小技巧在调试下拉选项时不要只在预览模式里看建议先在宜搭的“页面运行态”打开浏览器开发者工具切换到网络面板观察数据请求的URL和响应体。响应体是空的说明是权限或过滤条件问题响应体有数据但下拉没显示则是字段映射有问题。这一招能让你少走很多弯路。7. 实战心得一个做了29个下拉的审批表单教会我的事先分享一个数据我最近接手过一个内部采购审批应用一个表单里加了29个下拉单选涉及供应商、发票类型、费用归属、预算科目、验收人等。做下来最大的体会是——下拉单选的设计从一开始就要有全局意识。第一选项命名规范要统一。要么全部用中文要么全部用英文编码不要让“供应商名称”“SUPPLIER_NAME”混着用。因为动态数据源的选项名称和值要跟其他表单关联口径不一致后续每张表单都要额外写转换逻辑。第二凡是引用主数据的下拉全部从主数据表单动态获取代码里绝不写死任何业务枚举。宁可配置时多花五分钟也不要让业务方改一次客户名称你就要发布一次应用。第三凡是选项超过20个的下拉一律开启远程搜索。这张审批表单里的供应商下拉有300多条记录不开远程搜索手机端打开表单时体验几乎是灾难级的。第四把“是否启用”字段作为通用过滤条件贯彻到底。主数据表里统一维护启用状态所有引用它的下拉都自动过滤掉历史废弃数据这是低代码项目维护成本最低的好习惯。如果你也在搭复杂的表单应用我给的建议是先把整张表单的数据流图画出来哪个字段来自哪张表、哪个下拉联动哪个字段理清楚了再动手配置。这个习惯能让你省掉至少一半的调试时间。回到文章开头的问题——下拉单选真的简单吗从组件功能上看确实不复杂但从一个能支撑真实业务、稳定运行、可维护可扩展的应用角度看它背后的数据设计、联动逻辑和权限控制恰恰是低代码开发中最见功力的地方。把这个组件吃透了宜搭里其他组件你也会融会贯通得更快。后续如果大家需要我可以专门写一期级联选择与下拉单选搭配做省市区联动的完整教程。
返回列表