先贴上官网：[官网]http://www.form-create.com/
第一、下载安装
有很多版本的，这里我下载的是element-ui版本的
npm i @form-create/element-ui
第二、引入
在main.js文件里面
import formCreate from '@form-create/element-ui' // form-create 表单生成器
Vue.use(formCreate)
第三、生成表单
组件模式
使用 <form-create></form-create> 标签创建表单
import { timestarpContrast } from '../../utils/myFunc' // 这个是在公共组件封装的方法引入
<div id="app1">
<form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create>
</div>
还有其他的模式，可以去看官网。
第四、在vue页面中使用
<form-create v-model="fields" :rule="searchrule" :option="searchOptions" ref="searchForm"></form-create>
配置项
export default {
data() {
return {
//实例对象
fApi: {},
//表单数据
value: {},
//组件参数配置 http://www.form-create.com/v2/element-ui/global.html#option-form
searchOptions: {
submitBtn: false, // 这里是不需要提交按钮的意思
// 表单提交事件 -- 如果有需要提交，可以用这个
// onSubmit: function (formData) {
// alert(JSON.stringify(formData))
// },
//行内表单模式
inline: false,
//表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
labelPosition: 'right',
//表单域标签的后缀
labelSuffix: undefined,
//是否显示必填字段的标签旁边的红色星号
hideRequiredAsterisk: false,
//表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
labelWidth: '125px',
//是否显示校验错误信息
showMessage: true,
//是否以行内形式展示校验信息
inlineMessage: false,
//是否在输入框中显示校验结果反馈图标
statusIcon: false,
//是否在 rules 属性改变后立即触发一次验证
validateOnRuleChange: true,
//是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
disabled: false,
//用于控制该表单内组件的尺寸 medium / small / mini
size: undefined,
//是否显示 label
title: true
},
//表单生成规则 链接：http://www.form-create.com/v2/guide/rule.html#%E7%A4%BA%E4%BE%8B
rule: [
{
type: "el-row",
native: true, // 类型: Bool 是否原样生成组件,不嵌套的FormItem中
children: [
{
type: "input", // 生成组件的名称(就是表单的名称：如input，radio，checkbox，select，DatePicker等)
field: "sqrxm", // 表单组件的字段名称
title: "申购人姓名：", // 组件的名称
col: { // 设置组件的布局规则
span: 8,
},
value: "", // 表单组件的字段值
className: "modelFormOption", // 设置FormItem的class,不推荐,建议使用 wrap 配置
},
{
type: "DatePicker",
field: "xfsjq",
title: "选房时间起",
col: {
span: 8,
},
value: "",
className: "modelFormOption",
props: { // 设置组件的props
type: "date",
format: "yyyy-MM-dd",
placeholder: "请选择开始时间",
style:"width:100%",
},
info: "开始时间不得晚于结束时间",
on: { // 这里做了一个校验
change: () => {
// 校验开始时间是否晚于结束时间
timestarpContrast(
this.fields,
"xfsjq",
"xfsjz",
"xfsjq",
() => {
this.$alert("开始时间不得晚于结束时间", "错误信息", {
confirmButtonText: "确定",
});
}
);
},
},
},
{
type: "DatePicker",
field: "xfsjz",
title: "选房时间止",
col: {
span: 8,
},
value: "",
className: "modelFormOption",
props: {
type: "date",
format: "yyyy-MM-dd",
placeholder: "请选择结束时间",
style:"width:100%",
},
info: "结束时间不得早于开始时间",
on: { // 这里做了一个校验
change: () => {
// 校验开始时间是否晚于结束时间
timestarpContrast(
this.fields,
"xfsjq",
"xfsjz",
"xfsjz",
() => {
this.$alert("结束时间不得早于开始时间", "错误信息", {
confirmButtonText: "确定",
});
}
);
},
},
},
},
],
},
],
//组件参数配置
option: {
//表单提交事件
onSubmit: function (formData) {
alert(JSON.stringify(formData))
}
}
}
}
}
封装的函数方法：
// 开始时间、结束时间的范围校验（配合form-create使用）
export function timestarpContrast(fApi, startTimeName, endTimeName, targetName, callback) {
let starttimestarp
let endtimestarp
const starttime = fApi.getValue(startTimeName)
const endtime = fApi.getValue(endTimeName)
if (starttime && endtime) {
starttimestarp = new Date(starttime)
endtimestarp = new Date(endtime)
if (starttimestarp > endtimestarp) {
callback()
fApi.setValue(targetName, '')
}
}
}
插入一个props:{width:100%;}的图片
1.png
第五、重置
我这里是顶部搜索栏，所以有查询、重置等功能按钮。
<div class="txtcenter">
<el-button type="primary" size="mini" @click="searchXfrgjg"
>查询</el-button
>
<el-button
type="primary"
plain
size="mini"
@click="handleReset"
>重置</el-button
>
</div>
重置表单值http://www.form-create.com/v2/instance.html#%E8%AE%BE%E7%BD%AE%E8%A1%A8%E5%8D%95%E5%80%BC
// 用法：fApi.resetFields()
handleReset() {
this.$refs.searchForm.$f.resetFields(); // 重置表单值 --用法fApi.resetFields()
// this.fApi.resetFields(); 这种也行
// 如果有选项要清空--rule就是配置的规则，里面是每一项配置，如果里面还有children,则要点下去
// this.rule[0].options = []
// this.searchrule[0].children[1].options = []; 我这里就是指明清空哪几个表单选项
// this.fields.getRule("zh").options = []; 建议使用这种方法
}
第六、查询（主要是获取表单值/表单数据）
链接：http://www.form-create.com/v2/instance.html#%E8%8E%B7%E5%8F%96%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE
// 获取表单数据
// 用法： const formData = fApi.formData()
searchXfrgjg() {
// fields: {}, 实例对象 和上面的fApi是相等的，换了个名字而已
console.log(this.fields.formData())
},
第七、设置表单值
// 用法：fApi.setValue({goods_name:'HuaWei'})
// 设置表单数据
getData() {
this.fApi.setValue({
sqrxm: "潇洒哥",
xfsxh: "333",
xfsjq: "2022-03-13",
xfsjz: "2023-03-13",
zjhm: "440000022020022020202",
xq: "万达华府",
rcgwdz: "广东省xxxxxx",
后续会更新...
