vue3 两份json数据对比不同的页面给于颜色标识

两份数据对比，新的跟旧的数据不一样页面就给于颜色标识

1. 给每个表单控件添加动态样式标识 :class="hasChanged(字段名称)"

 <div class="container">
    <el-row>
      <el-col :span="12">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="Activity name">
            <el-input v-model="form.name" :class="hasChanged('name')"/>
          </el-form-item>
          <el-form-item label="Activity zone">
            <el-select v-model="form.region" placeholder="please select your zone" :class="hasChanged('region')">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="Activity">
            <el-input v-model="form.activity" :class="hasChanged('activity')"/>
          </el-form-item>
          <el-form-item label="Instant delivery">
            <el-switch v-model="form.delivery" :class="hasChanged('delivery')"/>
          </el-form-item>
          <el-form-item label="Resources">
            <el-radio-group v-model="form.resource" :class="hasChanged('resource')">
              <el-radio value="Sponsor">Sponsor</el-radio>
              <el-radio value="Venue">Venue</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Activity form">
            <el-input v-model="form.desc" type="textarea" :class="hasChanged('desc')" />
          </el-form-item>
        </el-form>
      </el-col>
      <!-- 第二个 -->
      <el-col :span="12">
        <el-form :model="form2" label-width="auto" style="max-width: 600px">
          <el-form-item label="Activity name">
            <el-input v-model="form2.name"/>
          </el-form-item>
          <el-form-item label="Activity zone">
            <el-select v-model="form2.region" placeholder="please select your zone">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="Activity">
            <el-input v-model="form2.activity"/>
          </el-form-item>
          <el-form-item label="Instant delivery">
            <el-switch v-model="form2.delivery" />
          </el-form-item>
          <el-form-item label="Resources">
            <el-radio-group v-model="form2.resource">
              <el-radio value="Sponsor">Sponsor</el-radio>
              <el-radio value="Venue">Venue</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Activity form">
            <el-input v-model="form2.desc" type="textarea" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>

2. 两份数据进行对比 如果想同的话 以字段名为key 添加 markData[字段名] = { status: 'hasChanged' } 不相同的话 添加 markData[字段名] = { status: 'noChanged' }

// 新的
const form = ref({
  name: '',
  region: '',
  activity: '',
  delivery: false,
  resource: '',
  desc: '',
})
// 老的
const form2 = ref({
  name: '',
  region: '',
  activity: '',
  delivery: false,
  resource: '',
  desc: '',
})
// 新的数据
 const newData = {
   name: 'test',
   region: 'test',
   activity: 'testst',
   delivery: false,
   resource: 'Sponsor',
   desc: 'asddasdasd',
 }
// 老的数据
 const oldData = {
   name: 'test1',
   region: 'test',
   activity: 'testst',
   delivery: true,
   resource: 'Sponsor',
   desc: 'asddasdasd11',
 }

3. 对比方法

// 对比后生成新的数据
const compareData = ref({})
// 对比方法
const compareFun = (newData, oldData) => {
  const dataA = { ...newData }
  const dataB = { ...oldData }
  const markData = {}
  Object.keys(dataA).forEach((key) => {
    markData[key] = {}
    if (dataA[key] !== dataB[key]) {
      markData[key] = { status: 'hasChanged'}
    } else {
      markData[key] = { status: 'noChanged'}
    }
  })
  compareData.value = markData
}

4. 使用计算属性给每个表单控件添加对应的class

const hasChanged = computed(() => (key) => {
  if (!compareData.value[key]) return ''
  return compareData.value[key].status
})

5. 对比差异的数据给于颜色标识样式

.hasChanged {
  :deep(.el-input__wrapper) {
    background-color: #f2ac51;
  }
  :deep(.el-input__inner) {
    color: #d9001b;
  }
  :deep(.el-select__wrapper) {
    background-color: #f2ac51;
  }
  :deep(.el-select__placeholder) {
    color: #d9001b;
  }
  :deep(.el-textarea__inner) {
    background-color: #f2ac51;
    color: #d9001b;
  }
  :deep(.el-switch__core) {
    background-color: #f2ac51;
  }
  :deep(.el-radio) {
    background-color: #f2ac51;
  }
}