提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

需求

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

一、实现思路

因为返回的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.用字符串逐个字符比较不但非常慢而且很容易出错.