在element组件中使用vue-code-diff代码比对组件，在本案例中主要是比对json字符串信息，效果图如下所示。

 

1.安装vue-code-diff

npm install vue-code-diff -S

2.导入

import CodeDiff from 'vue-code-diff'

3.引入组件

components: { CodeDiff , JSONViewer}

4.使用

 <el-dialog
        title="同步数据比对"
        :visible.sync="syncDataDiffDialog"
        width="55%"
        :close-on-click-modal="false"
      >
        <div>
          <CodeDiff
            class="center"
            :old-string="oldStrToCompare"
            :new-string="newStrToCompare"
            :context="10"
            outputFormat="side-by-side" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="syncDataDiffDialog = false">取 消</el-button>
          <el-button type="primary" @click="syncDataDiffDialog = false">确 定</el-button>
        </span>

代码实现后主要出现两点问题，第一点，左右高低不齐，第二点问题json出现下拉标志的符号，根本原因目前感觉是高亮引入组件版本的问题与当前项目无法兼容，但是无法解决。目前只能是在此基础上修改css解决两点问题。

5、解决序号不齐和下拉标志解决办法如下

通过F12查看需要对其进行穿透处理，把指定的样式修改如下就可以了。

<style lang="scss" scoped>
.center {
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  // overflow-x: auto;
}
/* 样式穿透-起始行左右对齐，*/
.center>>>.d2h-code-side-line{
  height:15px;
}
.center>>>code.hljs{
  padding: 0;
}

6、vue-code-diff其他的参设置

官网：GitHub - Shimada666/v-code-diff: A vue code diff display plugin, support Vue2 / Vue3