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


需求

用户需求是记录项目各项操作的日志,并且显示给用户,并且把有修改的值给用户高亮显示,如图所示
在这里插入图片描述

一、实现思路

因为返回的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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐