前端实现表单对比，标记出值有变动的字段

项目场景：

项目场景：在项目中，用户要求提供一个页面，左边显示某条数据第一次提交时的数据值，右边显示当前数据值，若字段值不一致，则显示提示语和css样式，如图所示：input、select、number组件都可以显示【值有变动】，且当你将将两边值设置为一致时，就不显示提示。

---

解决方案：核心是巧用el-form的表单验证

1、首先给右边的表单绑定表单验证规则，form是右边正在编辑的表单


2、给你想要对比的、校验的字段配置校验规则，如上图，【validator: validatePass】是自定义的校验规则，用于对比表单原始数据与当前数据，每个需要对比的字段都要加上。注意将这个校验规则放在最后，这样字段校验优先显示【值有变动】检验。trigger是change和blur都写上，避免不触发校验。
3、自定义的校验规则validatePass，内容如下：
注意trainingPlanData是原始数据（左边的对比表单），rule.fullField是绑定的字段名，这段代码意义就是对比字段的原始值和当前值

4、提交表单时，首先取消【值有变动】校验，不然值有变动的字段将校验不通过，提交不了表单。然后进行其他的校验，如果校验不通过，再重新加上【值有变动】校验

在提交表单后，加上【值有变动】校验。