修改默认按钮

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

设置全局配置

修改默认按钮属性

<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>