【Vue】对比两个form表单，并将有差异的项标成红色

页面代码如下：

<template>
  <div class="app-container">
    <!-- form表单对比，并标记有差异的项 -->
    <el-row :gutter="20" style="padding:40px">
      <el-col :span="12" style="border-right:1px dotted #000;">
        <h4 style="text-align: center;margin: 0 0 10px 0;">对比模板</h4>
        <el-form
          ref="compareForm"
          label-width="40px"
          :model="compareForm"
        >
          <el-form-item
            v-for="(item,index) in compareForm"
            :key="index"
            :label="item.description"
            :class="item.diffStyle"
          >
            <el-input v-model="item.value" />
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <h4 style="text-align: center;margin: 0 0 10px 0;">基础模板</h4>
        <el-form
          ref="normalForm"
          label-width="40px"
          :model="normalForm"
        >
          <el-form-item
            v-for="(item,index) in normalForm"
            :key="index"
            :label="item.description"
            :class="item.diffStyle"
          >
            <el-input
              v-model="item.value"
              disabled
            />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="text-align:center;">
      <el-button type="primary" @click="compareModel()">对比</el-button>
    </el-row>
  </div>
</template>

表单内容定义如下：

data() {
    return {
      // 基础模板
      normalForm: {
        height: {
          description: '身高',
          diffStyle: '',
          value: '165cm'
        },
        weight: {
          description: '体重',
          diffStyle: '',
          value: '52kg'
        },
        sex: {
          description: '性别',
          diffStyle: '',
          value: '女'
        }
      },
      // 对比模板
      compareForm: {
        height: {
          description: '身高',
          diffStyle: '',
          value: '165cm'
        },
       weight: {
          description: '体重',
          diffStyle: '',
          value: '80kg'
        },
        sex: {
          description: '性别',
          diffStyle: '',
          value: '女'
        }
      }
    }
  },

注意：此处的diffStyle不能单独定义，然后直接绑定到页面的class中，因为对比完以后，如果存在有差异的项，在改变样式时会全局修改而不只是修改有差异的那一项；所以必须在form表单的每一项中单独定义再绑定到class属性上，这样修改样式时，就只修改有差异的项了。

具体的对比方法如下：

 methods: {
    compareModel() {
      for (const part in this.compareForm) {
        if (this.compareForm[part].value !== this.normalForm[part].value) {
          this.normalForm[part].diffStyle = 'diff_style'
          this.compareForm[part].diffStyle = 'diff_style'
        } else {
          this.normalForm[part].diffStyle = 'normal_style'
          this.compareForm[part].diffStyle = 'normal_style'
        }
      }
    }
}

此处使用的样式是element UI自带的样式，要想修改默认样式，只能通过增加class来增加权重，从而覆盖掉默认的样式，具体修改如下：

<style>
.diff_style .el-form-item__label{
  color: red;
}
.diff_style .el-input__inner{
  color: red;
}
.normal_style .el-form-item__label{
  color: #606266;
}
.normal_style .el-input__inner{
  color: #606266;
}
</style>

注意：此处的style标签不能加scoped，否则将不生效

页面效果展示：