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

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

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

目录
打赏
0
0
1
0
13
分享
相关文章
|
9月前
|
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
308 6
|
7月前
表单的构成与创建、属性
表单的构成与创建、属性。
49 5
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
|
9月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
474 1
公开访问,子表单没有批量导入按钮
宜搭,子表单,批量导入,公开访问,没有批量导入功能
公开访问,子表单没有批量导入按钮
流程表单无法选择连接器
连接器已经创建完成,接口也够调通,但是在配置流程表单时,无法选择连接器,怎么回事?
【分享】宜搭子表单点击新增自动展开最后一项,折叠前面所有项.
宜搭子表单点击新增自动展开最后一项,折叠前面所有项. by 页一
816 0
FineReport 下拉列表框作为动态参数的实现方式(不使用参数界面实现参数对数据过滤)
决策报表中,不使用参数界面实现参数对图表的绑定(如:下拉列表框值对条状图数据过滤) 实现方法:下拉列表框的`控件名`是参数名
456 0
FineReport 下拉列表框作为动态参数的实现方式(不使用参数界面实现参数对数据过滤)
评论列表案例-将评论列表组件和评论项组件抽离为单独的组件|学习笔记
快速学习评论列表案例-将评论列表组件和评论项组件抽离为单独的组件
评论列表案例-将评论列表组件和评论项组件抽离为单独的组件|学习笔记