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

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

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

目录
相关文章
|
10月前
layui框架实战案例(11):表单自定义验证规则
layui框架实战案例(11):表单自定义验证规则
126 0
|
4月前
|
数据可视化 开发者
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
|
4月前
|
移动开发 前端开发 JavaScript
动态获取新增的数据+项目实例介绍
动态获取新增的数据+项目实例介绍
63 0
|
5月前
【宜搭】如何获取子表单当前操作行的值
在子表单onChange事件中,如何获取当前操作行的值
171 0
|
7月前
|
前端开发 容器
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
04EasyUI 应用- 创建展开行明细编辑表单的 CRUD 应用
30 0
公开访问,子表单没有批量导入按钮
宜搭,子表单,批量导入,公开访问,没有批量导入功能
公开访问,子表单没有批量导入按钮
“关联表单”组件文本数据筛选只支持包含条件的解决方案
在“关联表单”中使用数据筛选功能筛选文本时条件只有”包含“,此文章通过增加一个”下拉单选“组件,变相解决这个问题。
152 0
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
648 0
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
|
前端开发 测试技术 数据库
【测试平台开发】十七、接口编辑页面实现下拉级联选择,绑定接口所属模块
【测试平台开发】十七、接口编辑页面实现下拉级联选择,绑定接口所属模块
【测试平台开发】十七、接口编辑页面实现下拉级联选择,绑定接口所属模块
14. 表单标签及其应用实例
14. 表单标签及其应用实例
65 0
14. 表单标签及其应用实例