乐趣区

关于html5:vue判断elementui中elform是否更新变化变化就提示是否保存没变就直接离开

jiezi

问题形容

在咱们做我的项目中，会遇到这样的问题，就是在某个页面有一个 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，大家独特加油

退出移动版