FcDesigner Pro

Appearance

常见问题 ​

本文档汇集了一些用户在使用表单设计器时常遇到的问题，为您提供快速解决方案和使用建议。

页面样式错乱/功能不正常 ​

问题分析：如果页面样式出现错乱或按钮点击没有任何响应，通常是因为某些 UI 组件没有正确挂载。

解决方法： ​

  1. 查看控制台警告：打开浏览器的开发者工具，查看控制台输出。如果出现黄色警告，如 "[Vue warn]: Failed to resolve component el-button"，则说明有组件未挂载。
  1. 挂载缺失组件：在 main.js 中导入并挂载缺失的组件。例如：
javascript
// 导入未挂载的组件
import { ElBadge } from 'element-plus';


const app = createApp(App);
// 挂载组件，有两种方式
app.use(ElBadge);
// 或者
app.component(ElBadge.name, ElBadge);

通过上述步骤，您可以有效解决 UI 组件未挂载导致的问题，从而恢复页面的正常功能和样式。

表单的生命周期事件没有触发 ​

问题描述：在实例化表单时，您可能发现生命周期事件（如 onMounted、onCreated）没有按预期触发。

解决方法： ​

这个问题通常发生在 options 赋值时，FormCreate 组件已完成初始化。为了解决这一问题，可以采用以下策略：

使用 v-if 控制渲染：给 form-create 标签增加 v-if 条件，确保在所有数据准备好之后再渲染表单。

例如：

html
<form-create v-if="isReady" :rule="rule" :option="option"></form-create>

设置 isReady 为 false，确保在配置完成并准备好后，将其设置为 true。这样可以确保表单组件在适当的时机再次进行初始化，并正确触发生命周期事件。

表格表单中操作同一行的数据 ​

问题背景：在复杂表单中，可能需要操作同一行的表单数据，比如更新或获取单行数据。此时，我们可以使用 FormCreate 提供的方法来实现。

解决方法： ​

FormCreate 提供了一系列方法来方便地获取和修改同一行的组件规则和数据：

  • getParentSubRule：获取父规则的子组件规则。
  • getChildrenRuleList：获取子组件规则列表。
  • getChildrenFormData：获取子组件的表单数据。
  • setChildrenFormData：设置子组件的表单数据。

在线实例演示： ​

您可以在 在线示例链接 站点查看详细的使用案例，以帮助您更好地理解和应用这些方法到实际开发中。