vue判断elementui中el-form是否更新变化,变化就提示是否保存,没变就直接离开

问题描述

在我们做项目中,会遇到这样的问题,就是在某个页面有一个form表单供用户输入填写,需求是:如果用户在表单中输入了内容,但是没有点击保存,而突然想离开这个页面了,就要提示询问是否保存,这个时候就要判断表单内容是否发生变化,并做相应的逻辑控制。本篇文章分两种情况去简述如何判断form表单是否发生变化的解决思路

情况一 判断新增页面的表单是否发生变化

先说新增页面,新增页面比较特殊,因为里面的初始值都为空,所以我们只需要去判断,变化前和变化后的form表单的值是否不为空即可

html部分

js部分


情况二 判断编辑页面的表单是否发生变化

html部分

编辑页面的html部分同新增页的html部分一样

js部分


总结

如果想要全面的进行控制,可以结合vue路由的拦截钩子,beforeRouteLeave。具体情况具体分析,本篇文章只是简述了两种思路,具体怎么做还要看业务场景和需求。2021,大家共同加油

你可能感兴趣的