vue.js - vue，element-ui 复杂的表单如何监听是否改变？

Question

vue，element-ui 复杂的表单如何监听是否改变？

需要实现一个功能，就是如果新增、编辑时，用户没有修改表单，关闭时不需要提示，如果修改了表单，则需要提示用户。

本来想深度监听来实现，就是只要有变化，就表示已修改，但是有两个问题：1: 用户有可能又还原了;2: 新增或编辑打开页面时，可能需要调用一些接口来修改表单；

但是如果用值来对比，因为表单太复杂了，也不好实现。

请问有什么好办法吗？

Answer 1

解决的重点是状态区分: 区分数据的变化是由用户操作造成的? 还是由 js 脚本执行造成的?

问题就变简单了, 我们只要监听用户操作后才会触发的事件, 比如 @input="userInputed = true", @change="userInputed = true" 等等, 通过维护一个用户已编辑的状态, 来决定是否提示消息.

但是表单简单还好说, 复杂以后要加的地方实在太多, 所以就有了其他答案所说的: 比较最终数据是否变化, 来决定是否提示消息.

我这里再给出另一种可能的操作: 众所周知 el-form 组件可以提供 rules 校验字段, rules 中可以提供每一个 rule 触发的方式: trigger: blur|change, 我们就可以把上述的 @input/@change 中进行的状态变更, 放到自定义的校验逻辑里, 这样只要用户输入了, 我们就可以在校验逻辑里统一管理 this.userInputed = true 这个状态, 从而决定是否提示消息

Answer 2

跟楼上差不多。

在表单初始化，调用接口修改完成后深度拷贝一份原始数据。

然后可以在表单提交时或者窗口关闭时表单进行对比，可以使用json化后对比，当然也可以使用Lodash的isEqual方法或其他方式对比

// originForm: 备份数据// submitForm: 提交时的数据if(JSON.stringify(originForm) !== JSON.stringify(submitForm)){    // todo something}

Answer 3

1. 在初始化时深拷贝一次表单值，作为 originValue；
2. 监听表单的 value 变动，在 value 修改时将 value 和 originValue 进行比较，若相等则表示用户将值还原，若不相等则表示“已修改”；

监控频率可以自行控制一下

Answer 4

这个问题可以使用Vue的计算属性（computed property）来解决。Vue的计算属性是一种非常强大的功能，可以根据依赖的数据自动重新计算。

首先，你可以在Vue组件的data中定义一个初始值，表示表单是否修改。例如：

data() {  return {    form: {},    isFormModified: false  };}

然后，你可以定义一个计算属性，该属性会根据表单的值自动更新isFormModified的值。例如：

computed: {  isFormModified() {    // 对比当前表单值和初始值是否相等，如果相等则未修改，否则已修改    return JSON.stringify(this.form) !== JSON.stringify(this.initialForm);  }}

这里，initialForm是你表单的初始值，你可以在组件的created或mounted生命周期钩子中设置。例如：

created() {  this.initialForm = Object.assign({}, this.form);}

最后，你可以在表单的关闭事件中检查isFormModified的值，如果已修改则提示用户。例如：

<el-dialog :visible.sync="dialogVisible" @close="checkFormChanges">  <!-- 表单内容 --></el-dialog>

在Vue组件的方法中：

methods: {  checkFormChanges() {    if (this.isFormModified) {      // 提示用户表单已修改    } else {      // 关闭对话框，不需要提示用户    }  }}

这样，你就可以在用户关闭对话框时检查表单是否修改，如果修改了则提示用户。同时，由于使用了计算属性，Vue会自动在表单的值改变时更新isFormModified的值，你不需要手动去比较表单的值。