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

简介: 宜搭的级联组件不像下拉选择一样可配置关联其他选项,但是每次手动配置级联选项又很痛苦,我们如何借助宜搭的 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):表单自定义验证规则
212 0
|
4月前
表单的构成与创建、属性
表单的构成与创建、属性。
28 5
|
4月前
表单的构成与创建
表单的构成与创建。
23 2
|
5月前
ElementUI——表单使用自定义验证导致无法提交
ElementUI——表单使用自定义验证导致无法提交
36 2
|
6月前
|
开发框架 JavaScript 前端开发
基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式
基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式
|
6月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
366 1
|
5月前
|
存储 开发框架 前端开发
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
|
8月前
|
存储 前端开发 JavaScript
处理子表单数据
处理子表单数据
53 2
|
8月前
|
JavaScript
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
299 2