修改默认按钮

本文将介绍如何使用自定义组件按钮代替默认按钮

设置全局配置

修改默认按钮属性

<template>
     <div>
        <form-create :rule="rule" v-model="fApi" :option="options"/>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                     submitBtn: {
                        innerText:'自定义按钮',
                        loading:true,
                        round:true,
                        type:'success'
                     }                   
                },
                rule:[
                    {
                        type:'checkbox',
                        field:'label',
                        title:'标签',
                        value: [],
                        options:[
                            {label:'有用',value:0},
                            {label:'快速',value:1},
                            {label:'高效',value:2},
                            {label:'全能',value:3},
                        ],
                        validate: [{type: 'array', min:3, required: true, message:'最少选择3个'}]
                    }
                ]
            }
            
        }
    }
</script>

替换默认按钮

1. 隐藏默认按钮

首先通过设置全局配置隐藏表单默认的操作按钮

{
  submitBtn: false,
  resetBtn: false
}

2. 自定义表单操作按钮

<template>
     <div>
        <form-create :rule="rule" v-model="fApi" :option="options"/>
        <ElButton type="primary" plain @click="submit">提交</ElButton>
        <ElButton aligen="center" plain @click="reset">重置</ElButton>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                     submitBtn:false
                },
                rule:[
                    {
                        type:'checkbox',
                        field:'label',
                        title:'标签',
                        value: [],
                        options:[
                            {label:'有用',value:0},
                            {label:'快速',value:1},
                            {label:'高效',value:2},
                            {label:'全能',value:3},
                        ],
                        validate: [{type: 'array', min:3, required: true, message:'最少选择3个'}]
                    }
                ]
            }
            
        },
        methods:{
            submit(){
                this.fApi.submit((formData, fApi)=>{
                    alert(JSON.stringify(formData))
                })
            },
            reset(){
                this.fApi.resetFields()
            }
        }
    }
</script>