ElementUI dialog弹框 退出时重置表单数据
程序员文章站
2022-06-22 16:34:09
需求进行项目开发，用到了ElementUI的dialog弹出框，当再次点击弹出框时发现，原本数据的还存在解决查阅了ElementUI的文档，发现一个好东西就是这个方法，解决了问题，分享一下用法直接上代码吧，根据代码进行讲解
需求
进行项目开发，用到了ElementUI的dialog弹出框，当再次点击弹出框时发现，原本数据的还存在
解决
查阅了ElementUI的文档，发现一个好东西
就是这个方法，解决了问题，分享一下用法
- 直接上代码吧，根据代码进行讲解
<template>
<div>
<el-dialog
title="弹框的标题（可以根据需求自己定义）"
:visible.sync="dialogVisible"
width="80%"
@close ='resetForms(点击事件名称，自定义)' > // 官方提供的回调方法
<el-form ref="form" :model='form' label-width="200px" :inline="true" class="demo-form-inline" :rules="rules">
<el-form-item label="区划编码" prop="QHBM">
<el-input v-model="form.QHBM" style="width:150px;"></el-input>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default{
date(){
return {
form:{
QHBM:'',
}
}
},
methods :{
resetForms(){
this.$refs['form'].resetFields(); // form是绑定数据,一定记得加prop参数，不加的话无法重置弹框表单数据
},
}
}
</script>
代码展示
总结
按照这个方法，可以实现退出弹框时，数据重置的效果
本文地址：https://blog.csdn.net/weixin_45139342/article/details/107367989
上一篇： JS二级菜单不同实现方法分析【4种方法】
下一篇： jquery写tab切换，有过渡效果