在vue3项目中正确使用form表单生成器_vfrom3表单设计器

目录

1. 下载

2. 全局挂载

3. 使用

4. 保存设计后表单数据

5. 设置成功后预览效果

1. 下载

form表单设计器
npm/cnpm install @form-create/designer@next
 
下载ElementPlus
npm/cnpm install element-plus

2. 在main.js中进行全局挂载

import FcDesigner from '@form-create/designer'
import ElementPlus from 'element-plus'
 
app.use(FcDesigner)
app.use(ElementPlus)

3. 项目中使用

<template>
  <div class="ele-body">
    <div>
      <a-card :bordered="false" class="table-height" title="">
        <fc-designer ref="designer" :height="500" class="designer" />
      </a-card>
    </div>
  </div>
</template>

4. 保存设计后表单数据

获取表单数据
let designer = ref(null);
使用getRule()获取到表单设计的数据，使用getOption()获取到表单配置项，相反设置使用set...

5. 设置成功后预览效果

下载
npm/cnpm install @form-create/element-ui
 
引用可在main.js中进行全局挂载
 
页面中使用：
 
<template>
       <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value" />
</template>
 
 
rule：是表单数据
options：表单的配置项