点击“编辑”后取消，再点击“新增”模态框中出现“编辑”的内容

VUE3+element-ui项目中，点击点击“编辑”弹出模态框后取消，再点击“新增”模态框中出现“编辑”的内容。

原代码：

const handleEdit = (row) =>{
  dialogVisible.value = true
  action.value = 'edit'
  // 做一个浅拷贝, 把当前行数据显示出来, 对sex做一个字符串的转换
    Object.assign(formUser, {...row,sex:''+row.sex})
}

解决办法：引入VUE中的nextTick，在DOM更新完成后立即执行代码。

修改后的代码：

const handleEdit = (row) =>{
  dialogVisible.value = true
  action.value = 'edit'
  // 做一个浅拷贝, 把当前行数据显示出来, 对sex做一个字符串的转换
  // 点击"编辑"后, 取消, 再点击新增, 则里面会出现上一次"编辑"的formUser数据
  // 用nextTick()解决这个问题
  nextTick(()=>{
    Object.assign(formUser, {...row,sex:''+row.sex})
  })
}

成功解决。