表单设计器(自定义区域)

292 阅读1分钟

自定义区域

绑定动态数据

该组件,可以在html中添加自定义表单内容,原理相当于是引入一个作用域插槽,可以为表单引入自定义的内容,关于作用域插槽的使用,可以查看如下 文档

引入自定义组件
1拖拽【自定义区域】放入编辑区域
选择绑定值的数据类型 1652757060(1).png

  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": ""
}