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

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

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

目录
相关文章
layui框架实战案例(11):表单自定义验证规则
layui框架实战案例(11):表单自定义验证规则
194 0
|
4月前
|
开发框架 JavaScript 前端开发
基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式
基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式
|
6月前
|
数据可视化 开发者
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
|
6月前
|
小程序 数据格式
【经验分享】如何实现自定义数据源的级联选择组件?
【经验分享】如何实现自定义数据源的级联选择组件?
84 6
|
11月前
【宜搭】如何获取子表单当前操作行的值
在子表单onChange事件中,如何获取当前操作行的值
344 0
公开访问,子表单没有批量导入按钮
宜搭,子表单,批量导入,公开访问,没有批量导入功能
公开访问,子表单没有批量导入按钮
流程表单无法选择连接器
连接器已经创建完成,接口也够调通,但是在配置流程表单时,无法选择连接器,怎么回事?
|
前端开发 容器
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
51 0
|
前端开发 测试技术 数据库
【测试平台开发】十七、接口编辑页面实现下拉级联选择,绑定接口所属模块
【测试平台开发】十七、接口编辑页面实现下拉级联选择,绑定接口所属模块
【测试平台开发】十七、接口编辑页面实现下拉级联选择,绑定接口所属模块
14. 表单标签及其应用实例
14. 表单标签及其应用实例
89 0
14. 表单标签及其应用实例
下一篇
无影云桌面