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

合集 - 前端小bug(5)

1.点击“编辑”后取消，再点击“新增”模态框中出现“编辑”的内容2024-08-29

2.VUE样式穿刺2024-08-303.报错TypeError: Cannot read properties of undefined (reading 'filter')2024-08-304.vue3+element-ui项目中使用echart无法渲染表格2024-08-285.vue3中使用pinia报错2024-09-03

收起

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})
  })
}

成功解决。