form-create的基本使用
是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件
持续更新,有写的不对的地方请指点
入门
安装
yarn add @form-create/element-ui@next
引入
//main.js
// 引入form-create
import formCreate from '@form-create/element-ui'
import install from '@form-create/element-ui/auto-import'
//const app = createApp(App) app 是由创建app返回的
formCreate.use(install)
app.use(formCreate)
页面使用
<form-create
v-model="createFormData"
v-model:api="fApi"
:option="createOption"
:rule="rule"
/>
<el-button @click="getCreateFormData">获取formCreate创建的数据</el-button>
页面js代码
const viewsData = reactive({
// 实例对象
fApi: {},
// 表单数据
createFormData: {},
//组件参数配置
createOption: {
form: {
//行内表单模式
inline: false,
//表单域标签的位置,如果值为 left 或者 right 时,则需要设置 label-width
// labelPosition: 'right',
//表单域标签的后缀
labelSuffix: undefined,
//是否显示必填字段的标签旁边的红色星号
hideRequiredAsterisk: true,
//表单域标签的宽度,例如 '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: false,
},
row: {
//栅格间隔
gutter: 20,
//布局模式,可选 flex,现代浏览器下有效
type: undefined,
//flex 布局下的垂直排列方式 top/middle/bottom
align: undefined,
//flex 布局下的水平排列方式 start/end/center/space-around/space-between
justify: undefined,
//自定义元素标签
// tag: 'div',
},
onSubmit: (formData) => {
alert(JSON.stringify(formData))
},
submitBtn: {
show: false,
},
},
// 表单生成规则
rule: [
{
type: 'input',
// title: '商品名称',
field: 'goods_name',
value: '',
col: {
// labelWidth: 150,
span: 6,
},
props: {
placeholder: '请输入商品名称',
type: 'text',
},
validate: [
{ required: true, message: '请输入goods_name', trigger: 'blur' },
],
},
{
type: 'input',
title: '商品名称2',
field: 'goods_name2',
value: '',
col: {
span: 6,
},
props: {
type: 'text',
placeholder: '请输入商品名称',
},
validate: [
{
required: true,
message: '请输入goods_name',
trigger: 'blur',
},
],
},
{
type: 'select',
field: 'cate_id',
title: '产品分类',
class: 'filter aabbccdd',
value: '',
options: [
{ value: '104', label: '生态蔬菜', disabled: false },
{ value: '105', label: '新鲜水果', disabled: false },
],
col: {
span: 6,
},
props: {
// multiple: true,
},
},
],
})
代码参数解惑
v-model:api=“fApi”
这个用来通过js 获取 实例对象的【可以理解成element-plus表单的方法】,可以对表单隐藏,重载,获取表单数据,等其他对表单的操作
fApi 实例对象的使用
//官网文档
const fApi = formCreate(rules)
//实际用法 rules => 其实就是 :rule="rule" 属性的值,上面js写法里有我的数据
const fApi = formCreate(viewsData.rule)
//form-create 文档 api 里的 表单操作 的实例对象方法
api地址:http://www.form-create.com/v3/instance.html#%E8%8E%B7%E5%8F%96%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE
fApi.formData()
v-model=“createFormData”
这个属性比较简单,就是单纯的获取表单的数据
//获取表单的数据
getCreateFormData() {
console.log(viewsData.createFormData)
}
:option=“createOption”
这个参数是对表单布局配置
:rule=“rule”
这个参数就是表单生成规则,值为数组
[
{
type: 'input', //表单类型
// title: '商品名称',
field: 'goods_name', //表单key
value: '', //表单值
class: 'filter aabbccdd', //可以添加class属性
col: {
// labelWidth: 150,
span: 6, //栅格占据的列数
},
props: {
placeholder: '请输入商品名称',
type: 'text',
},
//表单验证
validate: [
{ required: true, message: '请输入goods_name', trigger: 'blur' },
],
},
]