el-form离开页面前判断数据是否改动并提示

最新推荐文章于 2024-07-08 16:06:13 发布

小杰~

最新推荐文章于 2024-07-08 16:06:13 发布

阅读量211

点赞数

文章标签： vue.js elementui 前端前端框架

原文链接：https://blog.csdn.net/EnidChann/article/details/109625726

版权

实现原理:
1.判断页面是否有数据改动, 可以在watch方法中深度监听form这个对象是否有改动.
(这里要注意, isDataChangeCount之所以用Number来判断变化次数, 是因为页面加载完时, form会出现一次数据变化, 因此只用true和false来判断是不准确的)
2.在beforeRouteLeave方法里进行对isDataChangeCount的判断,进而实现对应的提示和操作

watch监听数据的改变次数

watch:{
   form: {
     handler (n, o) {
       this.isDataChangeCount++
     },
     deep: true
   }
}

离开前判断数据是否有更改

  beforeRouteLeave (to, from, next) {
    if (this.isDataChangeCount > 1) {
      this.$confirm('有数据尚未保存，是否离开页面?', '提示', {
        confirmButtonText: '保存数据',
        cancelButtonText: '仍要离开',
        type: 'warning',
        center: true
      }).then(() => {
        // 进行数据保存的操作
      }).catch(() => {
        next()
      })
    } else {
      next() // 离开页面
    }
  },