vue_code_diff

居中的图片:

<!-- diff差异 -->
<el-dialogtop="2vh"width="70%"title="差异":visible.sync="showDiff"append-to-body
><div style="display: flex;"><div style="flex: 1;"><el-alerttitle="操作前的值"type="error"center:closable="false"/></div><div style="flex: 1;"><el-alerttitle="操作后的值"type="success"center:closable="false"/></div></div><CodeDiffer:old-string="diffOld":new-string="diffNew":context="10"output-format="side-by-side"is-show-no-change/><div slot="footer"><ElButtontype="primary"@click="showDiff = false">关 闭</ElButton></div>
</el-dialog>import CodeDiffer from 'vue-code-diff';components: { CodeDiffer},
data() {
return {showDiff: false,diffOld: '',diffNew: '',};
},handleShowDiff(scope) {console.log(scope, '444');const diffNew = scope.row.config_data;this.sortData();const diffOld = (this.allData[scope.$index + 1] || { config_data: '' }).config_data;// const diffOld = scope.row;this.diffNew = JSON.stringify(diffNew, null, 4);this.diffOld = JSON.stringify(diffOld, null, 4);this.showDiff = true;},// 对齐sortData() {this.allData = this.ModifyRecordTableData;if (this.sortKey && this.sortOrder) {this.allData = this.allData.sort((a, b) => {const result =this.sortOrder === 'descending'? a[this.sortKey] < b[this.sortKey]: a[this.sortKey] > b[this.sortKey];return result ? 1 : -1;});}return this.allData;}// 样式对齐.d2h-info {height: 18px;}.d2h-wrapper .d2h-code-side-line,.d2h-wrapper .d2h-code-line {height: 18px;}.d2h-code-line-prefix,.d2h-code-linenumber,.d2h-code-side-linenumber,.d2h-emptyplaceholder {height: 18px;}.d2h-change {display: none;}

Vue文本json对比vue_code_diff相关推荐

解决：vue文本识别 “ \n ” 的换行问题（完整案例说明）
文章目录 vue文本识别 " \n " 的换行问题:(完整案例说明) 一.需求场景: 二.效果图对比: 三.实现方法: 1:通过 `css属性`实现 2:使用`v-html`实现 ...
【文本分类】基于BERT预训练模型的灾害推文分类方法、基于BERT和RNN的新闻文本分类对比
·阅读摘要: 两篇论文,第一篇发表于<图学学报>,<图学学报>是核心期刊:第二篇发表于<北京印刷学院学报>,<北京印刷学院学报>没有任何标签. ·参考文 ...
2021 年 Angular vs. React vs. Vue 前端框架对比
2021 年 Angular vs. React vs. Vue 前端框架对比一个是 UI 库(React),另一个是成熟的前端框架(Angular),而其中最年轻的(Vue)则可以称之为渐进式框架 ...
用Java语言实现文本内容对比的算法和程序
前言近日,笔者在接到一项需求,就是用程序将两个文本的内容以行为单位进行比对,找出其中差异的部分进行展示,以便能够一眼看出修改人对文件做出了哪些修改. 刚接到这项需求时,感到颇有难度,但是经过深入思考 ...
【文本差异对比工具网页版】
文本差异对比工具网页版 html+js 免部署打开html文件即用
vue和layUi对比
vue和layUi对比 vue(angular,react)这些框架会负责数据和视图的绑定,数据变了,视图自动更新,视图发生事件,也会更新数据,很省事.layui(bootstrap, extjs)这 ...
前端json对比工具
json对比样式如下: 源码下载: https://download.csdn.net/download/QWERTY55555/87814342
vue将json格式的字符串格式化后输出到web界面上
vue将json格式的字符串格式化后输出到web界面上 <div><textarea readonly style="width: 100%;height: 600px;c ...
【vue setting.json】
vue setting.json 配置 {"editor.fontSize": 12, //编辑器字体大小"[scss]": {"editor.def ...

Vue文本json对比vue_code_diff

vue_code_diff

Vue文本json对比vue_code_diff相关推荐

最新文章

热门文章