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

水冗水孚 2021-02-22 22:59:25
vue elementUI 判断 el el-form


问题描述

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

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

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

html部分

<template>
<div id="app">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model.trim="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.trim="form.age"></el-input>
</el-form-item>
<el-form-item label="籍贯">
<el-input v-model.trim="form.home"></el-input>
</el-form-item>
</el-form>
<el-button @click="leave">离开</el-button>
</div>
</template>

js部分

<script>
export default {
name: "app",
data() {
return {
/* 第一步,form对象和html中的el-form-item一一对应,这个简单常规操作
然后因为是新增页面,所以初始值我们直接定义为空即可,一般用字符串空
或者是null空去表示,后面判断是否发生变化也是判断是否不为空*/
form:{
name:null,
age:"",
home:null
}
};
},
methods: {
// 假设用户点击了按钮准备离开当前页了,然后去做判断
leave(){
/* 第二步,定义一个初始标识为0,遍历form对象,此时的对象就三种情况,null或空字符串
或者有输入内容值。如果遍历获取的属性值为null或空字符串就让num不变,如果不为null
不为空字符串就说明用户输入内容了,就把标识num加上一。最终去判断这个num的值
如果num的值最终还是0,说明用户始终没有输入内容,就允许用户直接离开。如果num的
值最终大于0,就说明用户输入内容了,然后就询问用户是否要保留刚刚输入的内容。
*/
let num = 0
for (const key in this.form) {
if(this.form[key] == ""){
num = num + 0
}else if(this.form[key] == null){
num = num + 0
}else{
num = num + 1
}
}
// 第三步,根据标识num的最终值,去做流程逻辑控制判断
if(num > 0){
console.log("询问是否保存当前数据")
}else{
console.log("允许路由跳转");
}
}
},
};
</script>

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

html部分

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

js部分

<script>
export default {
name: "app",
data() {
return {
form:{}
};
},
mounted() {
/* 第一步,因为是在编辑页,所以进入这个页面的时候,我们需要发请求,获取对应的初始数据
这里的初始数据,一般会是一部分有值,另外一部分为空。思路是把初始值存两份,一份
存到data中去,用于页面显示,另外一份存到本地。后面就判断form中的内容和本地存的
初始值是否一致。一致就说明没有变化,不一致就说明变化了,说明用户输入内容了,就
询问用户是否保存
*/
let apiForm = { // 假设apiForm是我们发请求获取的数据
name:"孙悟空",
age:500,
home:"" /* 小细节,如果有空值,让后端传空字符串,这里home不能用null,因为若用户输入空格或
输入内容以后又删除掉,这里的null就会变成空字符串了,大家可以自己试试,小细节 */
}
this.form = apiForm
sessionStorage.setItem("initForm",JSON.stringify(apiForm)) // 因为是对象,所以要转成字符串存储
},
methods: {
leave(){
/* 第二步,判断this.form和initForm是否相等,不相等就提示用户是否保存
这里有一个细节,因为this.form和initForm都是对象,对象和对象是永远不相等的
(对象是引用数据类型,指向的堆地址是不相等的)所以要把对象转成字符串,看是否相等
initForm已经转成字符串了,所以转一下this.form去判断就行了
*/
if(JSON.stringify(this.form) == sessionStorage.getItem("initForm")){
console.log("表单没变化,允许离开");
}else{
console.log("表单变化,询问是否保存");
}
}
},
};
</script>

总结

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

版权声明
本文为[水冗水孚]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000039256434

  1. vue.js项目win10 npm install的时候报错
  2. springboot 开启http2
  3. Vue事件总线(EventBus)
  4. jQuery EasyUI使用教程:自定义数据网格分页
  5. 使用OkHttp和OkHttpGo获取OneNET云平台数据
  6. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件
  7. Python belongs to back-end development or front-end development? Introduction to Python!
  8. HTTP 1.x 学习笔记 —— Web 性能权威指南
  9. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件
  10. HTTP 1.x 学习笔记 —— Web 性能权威指南
  11. Javascript中的事件冒泡与捕获
  12. The root element is missing 解决方法
  13. Javascript中的事件冒泡与捕获
  14. 010_ HTML5
  15. 020_ CSS3
  16. 030_ JavaScript
  17. Anti shake and throttling and corresponding react hooks package
  18. Using CSS in JS in svelte
  19. Pure CSS free website with dark mode switching function
  20. Front end interview daily 3 + 1 - day 678
  21. How to insert an element into the specified index of an array?
  22. 配置证书使得ngnix能够发布https的可信网站
  23. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  24. 前端url链接带的参数加密
  25. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  26. Is react server components OK?
  27. Summary of front end basic knowledge (4) - webpack
  28. Sass nesting rule
  29. 前端三大框架:数据绑定与数据流
  30. axios 源码阅读(一)--探究基础能力的实现
  31. Javascript中的事件冒泡与捕获
  32. #研发解决方案#易车前端监控系统
  33. 【JS】877- 35 个 JavaScript 的奇葩知识,长见识了!
  34. #研发解决方案#易车前端监控系统
  35. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  36. Front end, school recruitment, Taobao, guide
  37. Front end, social recruitment, Taobao, guide
  38. javascript 十大经典排序
  39. Draw a mellow cactus with the boneless technique of Meticulous Brushwork
  40. HTTP 1.x 學習筆記 —— Web 效能權威指南
  41. Vue3元件(九)Vue + element-Plus + json = 動態渲染的表單控制元件
  42. 我的 HTTP/1.1 好慢啊!
  43. Vue為何採用非同步渲染
  44. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  45. Front end monastery
  46. How to quickly understand a new front end project?
  47. webpack4.X核心工具库之tapable实例对象Hook
  48. webpack4.X核心工具库之tapable实例对象Hook
  49. C++使用libcurl进行http通讯
  50. Can be directly used in HTML special character table Unicode character set
  51. C++使用libcurl进行http通讯
  52. Java traverses list < string > and takes out the string elements in it, and splices them with ","
  53. Self taught web front end more than two months, talk about my harvest and progress, learning summary
  54. vue 中使用 css 变量
  55. 深入了解React中state和props的更新
  56. 百度分享不支持https的解决方案
  57. [practical] ABAP mail sending (HTML + attachment)
  58. [practical] ABAP mail sending (HTML + attachment)
  59. Teach you how to select products with less profit and competition in Amazon Product Development (1)
  60. 【微前端】微前端最终章-qiankun指南以及微前端整体探索