Project scenario:
I encountered a problem some time ago. After the page was refreshed, I selected a piece of data for the first time, opened the editing pop-up window, and then closed it. After opening the new pop-up window, it should be the empty el-form form or the data when it was just opened for editing, and every time I close the pop-up window, I will use this.$refs[formName].resetFields() to reset the el-form. -form, so what is causing this?
Problem Description
After many tests, it was found that after the first click to add a pop-up window, there is no problem with the subsequent el-form form reset. Only the first click to edit will cause problems.
Cause Analysis:
This is because when we open the edit pop-up window for the first time after the page is refreshed, el-dialog is loaded lazily. The data in this line assigns a value to el-form, and then el-dialog is rendered. el-form has just completed initialization, so this el-form form will take effect every time it is initialized using this.$refs[formName].resetFields(), but the initialized value is the first data.
solution:
So what is the solution?
We only need to assign values after el-dialog rendering is completed.
this.visible = true
setTimeout(()=>{
this.form.name = row.name
this.form.sex = row.sex
},100)