【工作】vue对比数据差异展示

背景

提示：产品需要两组数据展示出对比差异，类似代码比对的效果。

例如：

最终效果图：

---

---

前言

调研了很多比对的插件，由于我们的数据是动态的且有一些业务逻辑存在，所以最后采用的是html-diff这个依赖。对应的链接为【html-diff】

---

提示：以下是我的解决办法，欢迎大家积极留言交流更好的解决方案

一、html-diff是什么？

一个对比html的diff依赖工具库。

二、使用步骤

1.引入库

代码如下（示例）：

import HtmlDiff from 'htmldiff-js';

2.渲染数据但不展示

代码如下（示例）：

// 这里是动态拿到需要比对的两组数据
let originalHTML = this.$refs.oldHtml.innerHTML;
let newHTML = this.$refs.newHtml.innerHTML;
this.innerHtml = HtmlDiff.execute(originalHTML, newHTML);

// 这里是我写的样式，大家可以根据自己需求进行调整
del {
  text-decoration: line-through;
  background-color: #fbb6c2;
  color: #555;
}

ins {
  text-decoration: none;
  background-color: #d4fcbc;

}

// 老的数据渲染
<div ref="oldHtml" v-show="false">
 xxx业务逻辑
</div>
// 新的数据渲染
<div ref="newHtml" v-show="false">
xxx业务逻辑
</div>
// 用来渲染比对之后的html
<div v-html="innerHtml">
</div>

这里这样写的原因，主要是因为希望拿到真正渲染之后的html来进行比对，因为数据有一些业务逻辑的展示逻辑等，所以用最后呈现出来的html进行比对。

---

总结

以上就是今天要分享的内容啦，本文仅仅简单介绍了html-diff的使用从而解决实现比对的业务场景，如果大家对于以上场景有更好的实现方式，欢迎大家积极评论一起交流呀～～～