目录
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:表单的配置项