vue + ElementUI 关闭对话框清空验证，清除form表单

最新推荐文章于 2023-11-17 11:13:56 发布

原创最新推荐文章于 2023-11-17 11:13:56 发布 · 1.5w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ui #ViewUI

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在使用Element UI的对话框组件时，在关闭对话框前通过before-close回调重置表单。具体实现是利用Vue的ref属性获取表单实例并调用resetFields方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[color=green][size=medium][b]
对话框右上角的close按钮（before-close：关闭前的回调，会暂停 Dialog 的关闭)

<el-dialog v-model="options" :before-close="closeDiv" width="500px" center>

<el-form autoComplete="on" :model="addForm" :rules="addRules" ref="addForm">

<el-form-item :label="$t('ChooseStudy.studyTitle')" class="dropdown-box" prop="studyNames">
<el-select v-model="addForm.studyNames" multiple :placeholder="$t('ChooseStudy.pleaseChoose')">
<el-option v-for="item in studyOptions" :key="item.value" :label="item.label" :value="item">
</el-option>
</el-select>
</el-form-item>

</el-form>
</el-dialog>

closeDiv(){
this.$refs['addForm'].resetFields()
}

[/b][/size][/color]