解决方法-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() // 这种写法 },
