el-dialog中的el-form表单的resetFiedls失效问题解决

1,426 阅读1分钟
    最近写项目的时候遇到一个问题,项目中使用到了el-dialog,dialog中有用到form表单,逻辑是新增和编辑使用的同一个
form表单,如果是新增的话,dialog打开form表单的时候所有item为空,编辑的话,dialog打开form的所有item回显
    实现这个效果,很简单,每次dialog关闭的时候调用form的resetFields方法使表单回到初始值,以为能实现,但实际上,
每次刷新页面,如果先点击编辑按钮,dialog弹出form回显,再点击新增,dialog弹出,form的item并没有清空,
    而是每次都是第一次点开编辑的时候的数据。继续刷新页面,这一次先点击新增,再点击编辑,再点击新增,就没有问题
后来发现原来是form表单的resetFiedls方法是回到第一次加载form表单。
    在form表单dom完全渲染之后,数据渲染之前的初始值,而我是在dialog的visible打开的同时就给表单绑定的对象赋值了
    那么在表单dom渲染出来之前,其实表单的初始值就是我第一次点击编辑的时候赋的值,所以之后不管怎么重置,都无法
清空表单。
    解决方法,在dialog打开的语句后,赋值语句前,加一个this.$nextTick,也就是等待打开dialog的那条语句伴随的所有
dom渲染完成后再进行赋值。