自定义区域

自定义区域是一个作用域插槽，可以为表单引入自定义的内容。

使用方法

1. 将 自定义区域 字段拖拽放入表单画布区域。

2. 指定 自定义区域 字段的数据类型（字符串、对象、数组）。

3. 在 GenerateForm 生成器中可以对 自定义区域 进行操作。

<fm-generate-form 
    :data="jsonData"
    ref="generateForm"
  >
  <template v-slot:blank="scope">
    <!-- 自定义区域 -->
    <!-- use v-model="scope.model.blank" to bind data -->
    <el-input v-model="scope.model.blank" />
  </template>
</fm-generate-form>

查看效果

表单数据: {}

TIP

scope.model.blank 中 blank 是绑定的字段标识。

绑定复杂类型

当 自定义区域 字段绑定数据类型为 对象（数组）。

<fm-generate-form
    :data="jsonData"
    ref="generateForm"
  >
  <template v-slot:blank="scope">
    <!-- 自定义区域 -->
    <!-- use v-model="scope.model.blank" to bind data -->
    宽度：<el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
    高度：<el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
  </template>
</fm-generate-form>

查看效果

表单数据: {}

引入静态内容

静态内容即不用绑定数据的内容，可以在字段属性面板中 取消数据绑定。

<fm-generate-form 
    :data="jsonData"
    ref="generateForm"
  >
  <template v-slot:blank>
    <!-- 自定义区域 -->
    这是一段静态文本
  </template>
</fm-generate-form>

查看效果

表单数据: {}