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

问题描述

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

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

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

html部分

js部分

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

html部分

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

js部分

总结

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