vue对比两段json文本修改,修改的项添加红色高亮显示
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
需求
用户需求是记录项目各项操作的日志,并且显示给用户,并且把有修改的值给用户高亮显示,如图所示
一、实现思路
因为返回的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可以判断object
if (!_.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.用字符串逐个字符比较不但非常慢而且很容易出错.
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e
4 个月前
8c391e04
6 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)