全代码框架文档
首页
快速上手
前端组件
前端二开
首页
快速上手
前端组件
前端二开
  • 二开前准备
  • 对接移动办公
  • 表单介绍

    • 表单封装逻辑
    • 传值和formModel
    • 组件的封装
    • 显示隐藏控制
    • 字段事件
  • 基础二开

    • 值计算
    • 修改组件值
    • 自定义校验
    • 使用远程数据源
    • 为工具栏添加按钮
    • 为表单添加新字段
  • 高级二开

    • 自定义字段
    • 自定义页面
    • 弹窗
    • 表单
    • 表格

使用远程数据源

如果有些组件(联想弹层、下拉框等)的显示数据不想使用预设的数据源或者magicAPI,也可以使用自写的接口。

如下代码所示,可以在config.ts文件中通过修改对应组件项中的componentProps中的apiCconfig属性来使用自写的接口,datasourceType的属性值应为api。apiParams则为对应的接口请求参数,其中也可以使用当前表单中的参数来充当请求接口的参数,如例子所示。

{
    datasourceType: 'api',
    params: { itemId: '' },
    apiConfig: {
        path: 'CodeGeneration/selection',
        method: 'GET',
        apiId: '93d735dcb7364a0f8102188ec4d77ac7',
        apiParams: [
            { key: '1', title: 'Query Params', tableInfo: [
            {
                name: 'projectId', // 参数名称
                value: '{"bindField":"selectProjectId","fieldKey":"xxxxxxxxxxxx"}',
                // bindField是表单中的字段名即field,fieldKey是的key值,这两个值需要和表单中的值对应。
                // 当绑定的表单字段值发生变化时,会自动用新参数重新请求接口。
                // value 也可以是一个固定值,写为正常的字符串即可。
                description: null,
                required: false,
                dataType: 'String',
                type: null,
                defaultValue: null,
                validateType: null,
                error: null,
                expression: null,
                children: null,
                bindType: 'data',
            },
            //多个参数时,只需要在数组中添加即可。
            ] },
            { key: '2', title: 'Header', tableInfo: [] },
            { key: '3', title: 'Body' },
        ],
    },
},
Last Updated:: 4/10/25, 5:54 PM
Contributors: DESKTOP-45LLIKH\11405
Prev
自定义校验
Next
为工具栏添加按钮