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

简介: 宜搭的级联组件不像下拉选择一样可配置关联其他选项,但是每次手动配置级联选项又很痛苦,我们如何借助宜搭的 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、在线试玩

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

目录
相关文章
|
2月前
|
开发框架 JavaScript 前端开发
基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式
基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式
|
4月前
|
数据可视化 开发者
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
|
4月前
|
JavaScript
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
205 2
|
4月前
|
小程序 数据格式
【经验分享】如何实现自定义数据源的级联选择组件?
【经验分享】如何实现自定义数据源的级联选择组件?
69 6
|
10月前
流程表单无法选择连接器
连接器已经创建完成,接口也够调通,但是在配置流程表单时,无法选择连接器,怎么回事?
公开访问,子表单没有批量导入按钮
宜搭,子表单,批量导入,公开访问,没有批量导入功能
公开访问,子表单没有批量导入按钮
|
11月前
|
前端开发 容器
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
41 0
|
前端开发 测试技术 数据库
【测试平台开发】十七、接口编辑页面实现下拉级联选择,绑定接口所属模块
【测试平台开发】十七、接口编辑页面实现下拉级联选择,绑定接口所属模块
【测试平台开发】十七、接口编辑页面实现下拉级联选择,绑定接口所属模块
14. 表单标签及其应用实例
14. 表单标签及其应用实例
82 0
14. 表单标签及其应用实例
|
存储 XML 算法
工作流Activiti框架中表单的使用!详细解析内置表单和外置表单的渲染
本文介绍了工作流Activiti框架中表单的使用。在工作流Activiti框架中,支持在业务流程中添加内置表单和外置表单。详细说明了工作流中的表单需要具备的属性以及表单属性在工作流中的映射关系。最后介绍了工作流Activiti框架中对支持的表单的渲染方式。通过这篇文章,可以帮助我们在工作流Activiti框架中更加熟练地运用表单。
1777 0
工作流Activiti框架中表单的使用!详细解析内置表单和外置表单的渲染