【示例中心案例分享】表单中级联组件配置表单数据源

简介: 宜搭的级联组件不像下拉选择一样可配置关联其他选项,但是每次手动配置级联选项又很痛苦,我们如何借助宜搭的 OpenApi 去实现这个功能呢?我们的三方开发者 「苏灏」带来了他的案例。

1、核心代码

// 级联选项数据处理exportfunctiontransformData(inputStr) {
constrows=inputStr.map(item=> {
returndataSourceList.map(_item=> {
returnitem[_item]
    }).filter(item=> {
return!!item    });
  });
constres= {
children: {}
  };
rows.forEach(row=> {
row.reduce((pre, cur) => {
if (!pre.children[cur]) {
pre.children[cur] = {
label: cur,
value: pre.value?`${pre.value}_${cur}` : cur,
children: {}
        }
      }
returnpre.children[cur];
    }, res);
  });
constmapToArray= (map) => {
returnObject.values(map).map(item=> {
if (item.children) {
item.children=mapToArray(item.children);
      }
if (Object.keys(item.children).length===0) {
deleteitem.children;
      }
returnitem;
    });
  };
returnmapToArray(res.children);
}

2、实现效果

3、在线试玩

示例中心 | 表单中级联组件配置表单数据源

目录
相关文章
|
人工智能 前端开发 JavaScript
纯干货!如何用Cursor+宜搭,3天完成三周开发量(附超详细视频教学)
Cursor是热门代码编辑器之一,通过与宜搭(Yida)结合,提供了强大的低代码页面和自定义组件生成能力。方案利用Claude模型的代码生成能力及MCP支持,大幅提升开发效率。开发者可通过Cursor连接宜搭表单设计器或自定义组件设计器,实现React源码的生成与同步,并支持二次编辑。现有功能涵盖文本、数字、图片、链接等多种字段类型,以及属性面板配置、JS代码生成等。
2491 83
|
人工智能 JavaScript 搜索推荐
宜搭融合 DeepSeek R1 满血版!手把手教你玩转低代码 AI 产品
AI技术的迅猛发展,特别是DeepSeek的推出,为企业带来了前所未有的智能化体验。当低代码平台与AI技术结合时,迸发出丰富的应用场景。本文详细介绍如何通过宜搭平台使用DeepSeek,涵盖网页版、AI助理版、AI生成组件、连接器等功能,帮助用户轻松实现智能化业务系统。
1944 7
宜搭融合 DeepSeek R1 满血版!手把手教你玩转低代码 AI 产品
|
12月前
|
存储 人工智能 缓存
全新「宜搭出海版」,跨境业务一搭搞定!
在全球化竞争中,中国出海企业面临高增长与抗风险的双重挑战。宜搭基于低代码平台推出「宜搭出海版」,专注解决跨境业务的核心痛点。提供15种语言+AI翻译、全球文件速传、国际化时区协同、全球地址定位、国际化邮箱、货币支持及离线能力等功能,助力企业实现高效、敏捷的全球业务拓展。版本包括面向中国出海企业的“宜搭出海版”和面向海外客户的“宜搭国际版”。
633 17
|
8月前
|
弹性计算 运维 安全
了解权限管理:数字化时代的安全基石
在数字化时代,权限管理作为信息安全的核心机制,通过定义“谁”能对“什么”执行“何种操作”,有效防范未授权访问与数据泄露,广泛应用于个人设备、企业系统与云端服务。它不仅保障安全,还提升业务效率与合规性,是数字化转型的关键支撑。
678 12
|
人工智能 文字识别 监控
卷死传统系统!AIOA 协同办公,傻瓜式玩转智能管理
AIOA协同管理平台基于钉钉和钉钉低代码构建,以预置OA应用快速迭代满足业务需求。方案内置销售、采购、财务费用闭环等主线应用,并提供固定资产、车辆管理、证照管理、访客管理等高频场景,实现开箱即用,快速响应企业信息化需求。通过统一门户、互联互通的流程体系、丰富的办公管理应用以及智能化能力,提升企业内外协同效率,支持持续数字化转型。
866 12
卷死传统系统!AIOA 协同办公,傻瓜式玩转智能管理
|
存储 移动开发 数据管理
localStorage 和 sessionStorage 的相同与不同
`localStorage` 和 `sessionStorage` 是 HTML5 提供的两种 Web 存储机制,用于在用户的浏览器中存储数据。它们都采用键值对形式存储字符串数据,并遵循同源策略,容量约为 5-10 MB。两者均支持 `setItem`、`getItem` 等方法。主要区别在于存储期限和作用域:`localStorage` 数据持久化,适用于用户偏好设置等长期存储;`sessionStorage` 数据仅限当前会话,适用于表单信息等临时数据。根据需求选择合适的存储方式可提升用户体验和数据管理效率。
|
数据采集 机器学习/深度学习 人工智能
【开源项目推荐】Great Expectations—开源的数据质量工具
【开源项目推荐】Great Expectations—开源的数据质量工具
1190 57
【分享】宜搭抽屉内嵌入表单,表单提交后自动隐藏抽屉
抽屉内嵌入表单,表单提交后自动隐藏抽屉
865 1
|
SQL 搜索推荐 关系型数据库
Windows 系统彻底卸载 SQL Server 通用方法
Windows 系统彻底卸载 SQL Server 通用方法
2450 0
Windows 系统彻底卸载 SQL Server 通用方法

热门文章

最新文章

下一篇
开通oss服务