自定义区域

该扩展相当于是引入一个作用域插槽,可以为表单引入自己定义的内容,不了解的可以参考 作用域插槽

设计器中显示区域,组件在生成器中直接引入

引入自定义组件

  1. 拖拽【自定义区域】放入编辑区域

  1. 根据你需要放入到该区域的字段选择类型

  2. 点击【生成代码】可快速查看,通过编码方式放入自己的组件

<!-- 添加如下代码 -->
<fm-generate-form>
  <template slot="blank_1565316398399" slot-scope="scope">
    <!-- 自定义 -->
    <!-- 通过 v-model="scope.model.blank_1565316398399" 绑定数据 -->
    宽度:<el-input v-model="scope.model.blank_1565316398399.width" style="width: 100px"></el-input>
    高度:<el-input v-model="scope.model.blank_1565316398399.height" style="width: 100px"></el-input>
  </template>
</fm-generate-form>
  1. 完成引入,预览一下查看效果

引入静态内容

静态内容即不用绑定数据的内容,在【操作属性】中去掉【数据绑定】选择。

  1. 拖拽自定义区域字段到编辑区,去掉【数据绑定】勾选。

  2. 点击【生成代码】复制修改代码

<fm-generate-form 
  :data="jsonData" 
  :remote="remoteFuncs" 
  :value="editData" 
  ref="generateForm"
>
    <template slot="blank" slot-scope="scope">
      <!-- 自定义区域 -->
      这是一段静态文本
    </template>
</fm-generate-form>
  1. 预览查看效果

  1. 获取数据将不会获取到自定义静态区域的数据
{
  "input_1566990348038": ""
}