Vue + Element UI (Form表单问题2)

Element UI 的Dialog 里面是 Form 表单,当点击取消按钮,或者点击关闭Dialog 的时候 Form表单里面的数据 没有清空

解决:

<el-form :model="dataForm" ref="dataForm" label-width="110px" >
<el-button @click="resetForm('dataForm')" type="info" :loading="buttonLoading">取消</el-button>
// 关闭dialog
closeModel() {
for (let key in this.dataForm) { this.dataForm[key] = ''; } this.$refs.dataForm.resetFields(); this.visible = false this.fileList = [] }, // 取消按钮 resetForm(formName) { for (let key in this.dataForm) { this.dataForm[key] = ''; } this.$refs.dataForm.resetFields(); this.visible = false this.fileList = [] },

上网查了一下Element UI 的  this.$refs.dataForm.resetFields(), 有人提供的解释是 这个方法只是把 form表单初始化了一下,但是并没有清空数据。

所以采用的遍历 el-form 绑定的属性dataForm 使得里面每个属性变成 '' 来实现

posted @ 2020-02-02 15:44  小兔子09  阅读(366)  评论(0编辑  收藏  举报