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

源码地址: Github | Gitee | 文档

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

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

数据结构说明

export type DescriptionData = Array<{_fc_id: string;          // 唯一标识符type: string;            // 组件类型field?: string;          // 字段idtitle?: 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： 包含子组件的数组，定义嵌套结构。

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