效果图

vue部分

<template><div><el-row><div><el-col :span="6"><p>json比对A</p><vue-json-editorv-model="jsonA" :show-btns="false"  :mode="'code'" lang="zh"  @json-change="onJsonChange"  @json-save="onJsonSave" @has-error="onError"></vue-json-editor>
</el-col>
</div>
<div> 
<el-col :span="6">
<p>json比对B</p><vue-json-editorv-model="jsonB" :show-btns="false"  :mode="'code'" lang="zh"  @json-change="onJsonChange"  @json-save="onJsonSave" @has-error="onError"></vue-json-editor></el-col></div><div> <el-col :span="6"><el-button @click="startCompare" type="primary"> 开始比对</el-button></el-col></div><div> <el-col><template><el-table:data="tableData" border  height="680px" :row-class-name="tableRowClassName" style="width: 100%"><el-table-columnprop="key"label="KEY"width="180"></el-table-column><el-table-columnprop="value"label="VALUE"width="180"></el-table-column><el-table-columnprop="A_Exsits"label="A是否存在"></el-table-column><el-table-columnprop="A_value"label="A对应VALUE值"></el-table-column><el-table-columnprop="B_Exsits"label="B是否存在"></el-table-column><el-table-columnprop="B_value"label="B对应VALUE值"></el-table-column></el-table>
</template></el-col></div></el-row></div>
</template>
<script>import vueJsonEditor from 'vue-json-editor'import axios from 'axios'import { platformBaseUrl } from '@/api/baseHost'export default {data () {return {jsonA: {'demo':{'msg': 'demo of jsoneditor'},'demo1':{'msg1': 'demo of jsoneditor'}},jsonB: {'demo':{'msg': 'demo of jsoneditor'},'demo1':{'msg1': 'demo of jsoneditor'}},tableData: [{'key': 'demo','value': 'msg','A_Exsits': 'Y','A_value':'demo of jsoneditor','B_Exsits':'Y','B_value':'demo of jsoneditor'},{'key': 'demo1','value': 'msg1','A_Exsits': 'Y','A_value':'demo of jsoneditor1','B_Exsits':'Y','B_value':'demo of jsoneditor'}],}},components: {vueJsonEditor},methods: {tableRowClassName(tableData) {// debuggerconsole.log('11211'+JSON.stringify(tableData))console.log(JSON.parse(JSON.stringify(tableData)).row.A_value)if (JSON.parse(JSON.stringify(tableData)).row.A_value == JSON.parse(JSON.stringify(tableData)).row.B_value){return '';}return 'success-row';},onJsonChange (value) {console.log('value:', value);},showModal(msg) {console.log('showModal resTrans msg.data after', msg)},onJsonSave (value) {console.log('value:', value);},onError (value) {console.log('value:', value);},startCompare(){axios.post(platformBaseUrl + "/api/jsonCompare/", {jsonA:this.jsonA,jsonB:this.jsonB}).then(response => {this.tableData = response.data.result;this.tableRowClassName(JSON.parse( response.data.result ))return this.tableData}).catch(err => {this.showModal("失败,请检查参数!");});}}, }
</script>
<style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background:	#1E90FF;}
</style>

加粗样式好几个反馈需要后台的比对函数的，其实很简单。就是以其中一个为基准，另一个遍历，如：

def jsondiff(jsona,jsonb):# 判断格式# if is_json(jsona) and is_json(jsonb):result = []# 是否为空if jsona == {}:return []else:# 遍历jsonA 和jsonB比较# base_info = json.loads(jsona)base_info = jsonafor key in base_info.keys():if isinstance(base_info[key], dict):for value in base_info[key].keys():if key in jsonb:if value in jsonb[key]:dic = {}dic["key"] = keydic["value"] = valuedic["A_Exsits"] = 'Y'dic["A_value"] = base_info[key][value]dic["B_Exsits"] = 'Y'dic["B_value"] = jsonb[key][value]if dic["A_value"]!=dic["B_value"]:result.append(dic)else:dic = {}dic["key"] = keydic["value"] = valuedic["A_Exsits"] = 'Y'dic["A_value"] = base_info[key][value]dic["B_Exsits"] = 'N'dic["B_value"] = ''result.append(dic)else:dic = {}dic["key"] = keydic["value"] = valuedic["A_Exsits"] = 'Y'dic["A_value"] = base_info[key][value]dic["B_Exsits"] = 'N'dic["B_value"] = ''result.append(dic)return result