开源项目低代码表单设计器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 ... */
]