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

原创已于 2023-07-12 09:24:57 修改 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

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

avue 专栏收录该内容

21 篇文章

订阅专栏

文章介绍了如何在Avue框架中使用表单，包括设置ref属性来调用校验方法$refs.publishForm.validate，以及处理表单提交的示例，如handleSubmit函数，用于关闭对话框、打印表单数据并调用后端接口。同时强调了done方法在清空表单内容中的重要性。

代码：

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