插槽扩展

支持通过插槽扩展自定义组件 v2.5.10+

scope数据结构

interface scope {
    rule:Rule; //组件生成规则
    prop:VNodeData; //on: 事件, props: 配置
    children: Vnode[] //子级
    model: { //定义field后才有
        value: any; //表单组件 value
        callback: (value:any)=>void; //表单组件 value 更新
    };
};

通过插槽生成一个表单组件

<template>
<div>
    <form-create :rule="rule" v-model="fApi" :option="options">
        <template slot="type-field-component" slot-scope="scope">
            <ElInput :value="''+scope.model.value" @input="(v)=>scope.model.callback(parseInt(v))" />
        </template>
    </form-create>
</div>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit: (formData)=>{
                        alert(JSON.stringify(formData))
                    },
                },
                rule:[
                    {
                        type:'fieldComponent',
                        field:'fieldComponent',
                        title:'自定义插槽',
                        value:100
                    }
                ]
            }
        }
    }
</script>