开源项目低代码表单设计器FcDesigner获取表单的层级结构与组件数据

在使用开源项目低代码表单设计器FcDesigner时，获取和理解表单的层级结构非常关键。通过getDescription和getFormDescription方法，您可以清晰掌握表单组件的组织结构和层次关系。这些方法为操控表单的布局和配置提供了强大的支持。

源码地址: Github | Gitee | 文档

层级结构与渲染规则的差异

请注意，层级结构可能与最终的渲染规则有所不同。特别是在某些复杂组件（如嵌套结构）的情况下，层级表示和渲染逻辑可能不一致。因此，在操作时需要关注组件的实际影响范围。

数据结构说明

export type DescriptionData = Array<{
    _fc_id: string;          // 唯一标识符
    type: string;            // 组件类型
    field?: string;          // 字段id
    title?: string;          // 组件名称
    slot?: string;           // 插槽名称
    props: Object;           // 组件配置
    children?: DescriptionData; // 子组件
}>

组件层级结构的获取

可以通过getDescription方法获取当前设计器中所有组件的层级信息，包括所有表单和非表单组件。

示例代码

<template>
    <fc-designer ref="designer" />
</template>

<script>
    export default {
        methods: {
            getDescription() {
                const tree = this.$refs.designer.getDescription();
                console.log(tree);
            }
        }
    }
</script>

方法返回的示例数据：

[
  {
    "_fc_id": "id_Fxltly0ebc4rbfc",
    "type": "input",
    "field": "Fwt8ly0ebc4rbec",
    "title": "输入框",
    "props": {}
  },
  /* ... more components ... */
]

获取表单组件的层级结构

getFormDescription方法专门用于提取设计器中所有表单组件的层级结构，不包括任何非表单组件。

示例代码

<script>
    export default {
        methods(){
            getDescription() {
                const tree = this.$refs.designer.getFormDescription();
                console.log(tree);
            }
        }
    }
</script>

方法返回的示例数据：

[
  {
    "_fc_id": "id_Fxltly0ebc4rbfc",
    "type": "input",
    "field": "Fwt8ly0ebc4rbec",
    "title": "输入框",
    "props": {}
  },
  /* ... only form components ... */
]

解析数据结构

• _fc_id： 每个组件的唯一标识，用于追踪和管理组件实例。
• type： 组件的类别，决定其在表单中的功能和表现。
• field： 对应表单数据中的字段键，对数据绑定至关重要。
• title： 组件的描述性名称，帮助识别组件用途。
• slot： 可选项，标记组件插槽位置（如需使用）。
• props： 组件配置对象，包含所有属性和参数设定。
• children： 包含子组件的数组，定义嵌套结构。

运用这些方法，开发者不仅能高效获取组件信息，还能透过数据结构深入优化和定制复杂表单，为应用程序带来更强的交互能力和灵活性。