form-create的基本使用_formcreate

form-create的基本使用

是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件

持续更新，有写的不对的地方请指点

入门

安装

yarn add @form-create/element-ui@next
1

引入

//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)
1
2
3
4
5
6
7
8
9
10

页面使用

<form-create
             v-model="createFormData"
             v-model:api="fApi"
             :option="createOption"
             :rule="rule"
             />
<el-button @click="getCreateFormData">获取formCreate创建的数据</el-button>
1
2
3
4
5
6
7

页面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,
            },
        },
    ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

代码参数解惑

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()
1
2
3
4
5
6
7
8
9

v-model=“createFormData”

这个属性比较简单，就是单纯的获取表单的数据

//获取表单的数据
getCreateFormData() {
	console.log(viewsData.createFormData)
}
1
2
3
4

:option=“createOption”

这个参数是对表单布局配置

option表单布局配置api

:rule=“rule”

这个参数就是表单生成规则，值为数组

这个属性规则api

[
    {
        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' },
        ],
    },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21