最近在写项目的时候,遇到一个问题,感觉场景挺常见的,就把它记录下来吧~



如上图所示,点击新建数据和编辑,用的时同一个弹出框,这时候就会出现一个问题,当弹出框弹出时,要判断点击的是新增还是编辑,如果是新建,则数据为空(placeholder),如果是编辑,表单中要显示这条数据的信息。

这在这里我用来是通过type来判断是新增还是编辑的,此时出现了一个问题,当我先点新增,再点编辑,之后再点新增是正常的,但是当我先点编辑,再点新增的时候,表单会显示数据内容,这个问题困扰了我好一阵。
之后了解到,关闭弹窗时调用表单的resetFields()方法,是对该表单项进行重置,将其值重置为初始值并移除校验结果(自己理解是当组件(这里就是弹窗)第一次被调用,resetFields()方法的初始值会生成),所以当我们先点新增,关闭弹窗表单resetFields

在项目中遇到新建和编辑数据共用同一弹窗的问题,通过type判断操作类型。点击新增时表单为空,编辑时显示数据。但先编辑后新增会导致表单保留编辑数据。原因是resetFields()在DOM更新后设置初始值。解决方案是利用Vue的$nextTick在DOM更新后绑定数据,确保新增时表单保持为空。

4482

被折叠的 条评论
为什么被折叠?



