修改表单规则

在尾部追加规则

<template>
<div>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
    <h2>操作</h2>
    <p>在表单尾部追加组件</p>
    <ElButton @click="append1">方式1</ElButton>
    <ElButton @click="append2">方式2</ElButton>
    <p>在inputNumber组件底部追加组件</p>
    <ElButton @click="set1">方式1</ElButton>
    <ElButton @click="set2">方式2</ElButton>
</div>
</template>

<script>
    export default {
        data(){
            return {
                i: 0,
                fApi:{},
                options:{
                    submitBtn:false,
                    resetBtn:false
                },
                rule:[
                    {
                        type:'inputNumber',
                        field:'number',
                        title:'库存',
                        value: 0
                    },
                    {
                        type:'input',
                        field:'info',
                        title:'简介',
                        value: '',
                        props:{
                            type:'textarea'
                        }
                    }
                ]
            }
            
        },
        methods:{
            getRule(){
                this.i++
                return this.$formCreate.maker.input('追加组件'+this.i,'input'+this.i,'')
            },
            append1(){
                this.rule.push(this.getRule())
            },
            append2(){
                this.fApi.append(this.getRule())
            },
            set1(){
                this.rule.splice(1,0,this.getRule())
            },
            set2(){
                this.fApi.append(this.getRule(), 'number')
            }
        }
    }
</script>

在顶部增加规则

<template>
<div>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
    <h2>操作</h2>
    <p>在表单顶部增加组件</p>
    <ElButton @click="append1">方式1</ElButton>
    <ElButton @click="append2">方式2</ElButton>
    <p>在input组件顶部增加组件</p>
    <ElButton @click="set1">方式1</ElButton>
</div>
</template>

<script>
    export default {
        data(){
            return {
                i: 0,
                fApi:{},
                options:{
                    submitBtn:false,
                    resetBtn:false
                },
                rule:[
                    {
                        type:'inputNumber',
                        field:'number',
                        title:'库存',
                        value: 0
                    },
                    {
                        type:'input',
                        field:'info',
                        title:'简介',
                        value: '',
                        props:{
                            type:'textarea'
                        }
                    }
                ]
            }
            
        },
        methods:{
            getRule(){
                this.i++
                return this.$formCreate.maker.input('追加组件'+this.i,'input'+this.i,'')
            },
            append1(){
                this.rule.splice(0,0,this.getRule())
            },
            append2(){
                this.fApi.prepend(this.getRule())
            },
            set1(){
                this.fApi.prepend(this.getRule(), 'info')
            }
        }
    }
</script>

添加组件的子组件

<template>
<div>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
    <h2>操作</h2>
    <p>在 col 组件内部增加</p>
    <ElButton @click="append1">方式1</ElButton>
    <ElButton @click="append2">方式2</ElButton>
</div>
</template>

<script>
    export default {
        data(){
            return {
                i: 0,
                fApi:{},
                options:{
                    submitBtn:false,
                    resetBtn:false
                },
                rule:[
                    {
                        type:'el-col',
                        title:'布局组件',
                        name: 'col',
                        children: []
                    }
                ]
            }
            
        },
        methods:{
            getRule(){
                this.i++
                return this.$formCreate.maker.input('追加组件'+this.i,'input'+this.i,'')
            },
            append1(){
                this.rule[0].children.push(this.getRule())
            },
            append2(){
                this.fApi.append(this.getRule(),'col', true)
            }
        }
    }
</script>

删除第一条规则

rule.splice(0,1)

删除表单组件

fApi.removeField('field')

删除自定义组件

fApi.removeField('name')