avue 自定义按钮修改后触发表单自带的校验方法；avue表单提交

祝你今天也快乐

已于 2023-07-12 09:24:57 修改

阅读量1.2k

点赞数

分类专栏： avue 文章标签： javascript vue.js 前端

于 2023-07-11 16:22:11 首次发布

本文链接：https://blog.csdn.net/killerdoubie/article/details/131663094

版权

avue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

代码：

<avue-form :option="option" v-model="publishForm" ref="publishForm" @submit="handleSubmit">
                <template slot-scope="{size}" slot="menuForm">
                        <el-button :size="size" @click="$refs.publishForm.resetForm()">取 消</el-button>
                        <el-button type="primary" :size="size" @click="$refs.publishForm.submit()">导 出</el-button>
                </template>
</avue-form>

1.触发表单自带的校验方法

给表单定义ref属性，并使用$refs.publishForm触发校验方法

2.avue表单提交

 handleSubmit(form, done) {
            setTimeout(() => {
             this.publishDialogVisible=false
             console.log(form);//表单填写的信息（一般在这里调用后端接口）
             done()//成功后置空表单内容（必须调用否则会出现点击新的表单 内容还未清空现象）
            }, 3000)
 }