解决方法-1
<el-dialog title="对话框"
:visible.sync="dialogFormVisible"
@close="closeDialog" // 此处不用带参
width="800px"
>
<el-form :model="dialogData" :rules="rules" ref="dialogData" label-width="86px">
<el-form-item label="费用名称:" prop="name">
<el-input v-model="dialogData.name"></el-input>
</el-form-item>
</el-form>
</el-dialog>
// 弹窗关闭事件,清空表单
closeDialog() {
this.$refs['dialogData'].resetFields()
},
原因:
在点击对话框的时候,回显数据,这个数据是 form 的数据,由于对话框用的是创建对话框的数据,那么 form 和 tableData的数据是双向绑定的,所以关闭对话框的时候,form的数据替换掉了tableData的数据,此处如果携带参数的话系统识别不到节点,数据无法清空,就会造成回显成功,关闭时原始数据被替换的bug,所以关闭事件是不需要携带参数的。
解决方法-2
/*
还有一种可能是因为在渲染dom的时候,数据没有响应更新,因为数据是比dom先渲染的,所以会出现无法清空表单的情况,这种时候就需要使用textTick了,在回显赋值的时候,使用nextTick更新,
*/
<template solt-scope="scope">
<div @click="setDom(scope.row)"></div>
</template>
setDom(row){
// 此处使用 nextTick 更新渲染dom
this.$nextTick(()=>
this.tableData = row
)
}
// 弹窗关闭事件,清空表单
closeDialog() {
this.$refs.dialogData.resetFields() // 这种写法
},