需求

用户需求是记录项目各项操作的日志,并且显示给用户,并且把有修改的值给用户高亮显示,如图所示

一、实现思路

因为返回的json的字段的属性是固定的,可以通过逐个比较更新前,后的转义后json串,如果某个属性的值不相同,就给该属性的值加上color样式然后通过v-html渲染.

二、实现步骤

1.数据格式

更新后的数据
更新前的老数据

2.代码部分

代码如下：

async getList() {const res = await sysoperalogGetPage(this.query);if (res) {this.tableDataList = res.records.map((item, index) => {let jsonResult = '';let oldData = '';// 判断操作结果弹窗的标识item.isChange = false;// 判断数据是否为null,不为null进行操作,否则会报错if (JSON.parse(item.jsonResult) &&JSON.parse(item.oldData) &&JSON.parse(item.jsonResult).data != '删除成功') {// 截取需要对比的数据jsonResult = JSON.parse(item.jsonResult).data;oldData = JSON.parse(item.oldData).data;// 遍历对比数据值for (const obj in jsonResult) {// 如果值不同添加样式用v-html渲染,isEqual可以判断objectif (!_.isEqual(jsonResult[obj], oldData[obj])) {jsonResult[obj] = `<span style="color:red">${jsonResult[obj]}</span>`;oldData[obj] = `<span style="color:red">${oldData[obj]}</span>`;console.log(item.operName);item.isChange = true;}}}// 获取需要渲染的数据item.jsonResultData = JSON.stringify(jsonResult);item.jsonOldData = JSON.stringify(oldData);// 去掉添加样式多余的\item.jsonResultData = item.jsonResultData.replace(/\\/g, '');item.jsonOldData = item.jsonOldData.replace(/\\/g, '');return item;});console.log(this.tableDataList);this.total = res.total;}},

3.html渲染部分代码

4.完成结果

总结

遇到类似的功能都可以采用类似的做法,合理利用v-html.用字符串逐个字符比较不但非常慢而且很容易出错.

vue对比两段json文本修改,修改的项添加红色高亮显示相关推荐

如何用pycharm对比两段代码（或两个文件的代码）
右键文件,点击Compare With 选择要对比的文件,点击ok 然后就可以愉快地玩耍啦♪(∇*) 参考文章:pycharm的强大之处之两个文件代码的比对
对比两个Json对象是否一致
在做api迁移的时候,需要比较老api和新api的返回结果是否一致,之前一直用到的是将json字符串转成Map然后对比 ObjectMapper objectMapper = new ObjectMa ...
python快速比较两个json_Python 比较两个json的方法
在测试过程中经常会对比两个json的异同,如果当json串较长时,一个一个的对比显然是很浪费时间的. 所以写一个比较json异同的测试方法是很有必要的. 下面介绍一下比较json异同的两种方法,以及测 ...
php 两段文本对比，不同的文字显示高亮
php 两段文本对比,不同的文字显示高亮[下面这个只能区分错误后面的..] <?php$str1 ="MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggS ...
es6如何修改json数组里的某个值_如何通过id使用纯Javascript（ES6）合并两个json对象值...
我有两个Javascript对象数组,并且想要将具有相同"ObjID"的两个Javascript对象的属性合并为一个Javascript对象.如何通过id使用纯Javascript ...
pads 文本不能修改_斜框检测经典网络(文本)- R2CNN
论文题目:R2CNN:Rotational Region CNN for Orientation Robust Scene Text Detection 论文来源:2017CVPR 论文地址:http ...
第二章 Caché JSON 创建和修改动态实体
文章目录第二章 Caché JSON 创建和修改动态实体使用JSON文字构造器使用动态表达式和点语法使用点语法创建动态对象属性使用点语法创建动态数组元素使用 %Set(), %Get(), ...
两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)
本篇文章主要介绍了"两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)",主要涉及到两款JSON类库Jackson与JSON-lib的性能对比(新增第三款 ...
如何匹配两段文本的语义？
喵喵喵,好久不见啦.首先很抱歉大家期待的调参手册(下)迟迟没有出稿,最近两个月连着赶了4个DDL,整个人都不好了.最近几天终于有时间赶一下未完成的稿子了.在赶DDL的时候夹着写了这篇文章,就先发布这一 ...

vue对比两段json文本修改,修改的项添加红色高亮显示

文章目录

需求