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;}
}