最近项目有个需求,就是需要个文件对比的功能,后端直接给我丢了一串60k的数据,这个是原数据,然后给我现数据在原数据的基础上发生
的改变,包括新增、删除、修改。需要在左边的框里显示原数据,右边显示现在的数据,就是一个文件对比的功能,要求新增、删除、修改的
内容用不同的颜色标注出来。
1.处理数据
由于数据比较庞大,后端不可能把现数据和原数据都给我,所以我需要把现数据在原数据的基础上处理好。后端给我的是个json对象,
我需要循环遍历先处理修改,因为我展现数据时用的时index,所以这时候处理更改后的索引很重要,不能先添加数据,先添加数据两个数
据就会不整齐,处理起来也比较麻烦。先处理修改比较简单,因为修改就是在原数据的基础上进行更改,索引是不会变的。我们需要循环
遍历数据,在需要修改的地方修改数据,这时顺带把修改数据的索引记下来,方便后面展现数据时进行标注颜色,修改标注为黄色。
然后,我们需要处理删除,删除的时候也需要遍历原数据,在删除数据的时候,删除数据的处理,我不是完全的删除,而是变相的删
除,就是把原数据以自己设计的标识码进行修改,当然也要保证不会影响潜在数据。这时处理标注就简单多了,只需要知道索引原数据与
现数据的遍历染色是一样的,删除的原数据与现数据都标注为红色。
最后就是处理新增,新增我一般会利用数据的类型的优势,把新增数据push进数组中,这时新增的数据默认就在最后,处理新增标注
时只需要知道原数据的最大索引,大于这个索引值现数据全部标注为绿色,原数据不需要改变。
2.自定义指令实现对比
template代码:
<el-dialog
:visible.sync="ExResultView"
:before-close="ExResultClose"
title="核查详情"
width="60%"
>
<el-row style="margin: 10px;">
<span
style="background-color: #42b983;display: inline-block;width: 10px;height: 10px;margin: 0 10px 0 10px;"
/>
<span>新增</span>
<span
style="background-color: rgb(247, 120, 88);display: inline-block;width: 10px;height: 10px;margin: 0 10px 0 10px;"
/>
<span>删除</span>
<span
style="background-color: #F19E04;display: inline-block;width: 10px;height: 10px;margin: 0 10px 0 10px;"
/>
<span>更新</span>
</el-row>
<el-row :gutter="12">
<el-col :span="12">
<el-card shadow="hover">
<el-table
v-tablelinkwork="tableLoadMore1"
ref="Extable1"
:data="ExOldValue"
:row-class-name="tableRowClassName"
height="650"
style="width: 100%"
>
<el-table-column :index="indexMethod" type="index" width="80" />
<el-table-column :label="croldBatime" prop="data" />
</el-table>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover">
<el-table
v-tablelinkwork="tableLoadMore2"
ref="Extable2"
:data="ExNewValue"
:row-class-name="tableRowClass"
style="width: 100%"
height="650"
>
<el-table-column :index="indexMethod" type="index" width="80" />
<el-table-column :label="crnewBatime" prop="data" />
</el-table>
</el-card>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="ExResultView = false">取 消</el-button>
<el-button type="primary" @click="downEx">下 载</el-button>
</span>
</el-dialog>
注册指令:
directives: {
// 这里是自定义指令
tablelinkwork: {
bind: function(el, binding) {
// bind钩子函数,当它与元素绑定的时候就会执行
const SELECTWRAP_DOM = el.querySelector('.el-table__body-wrapper')
SELECTWRAP_DOM.addEventListener('scroll', function() {
clearTimeout(t)
const t = setTimeout(function() {
binding.value()
}, 150)
})
}
}
},
data数据:
data(){
return {
ExResultView: false,
ExNewValue: [], // 数据
ExOldValue: [],
Loading: false, // loading样式
uindex: [], // 修改标注索引数组
delindex: [], // 删除标注索引数组
addindex: [], // 新增标注索引数组
croldBatime: '', // 时间戳
crnewBatime: '',
}
}
方法:
method: {
tableLoadMore1() {
const tab1 = this.$refs['Extable1'].bodyWrapper
const tab2 = this.$refs['Extable2'].bodyWrapper
this.$nextTick(() => {
tab2.scrollTop = tab1.scrollTop
})
},
tableLoadMore2() {
const tab1 = this.$refs['Extable1'].bodyWrapper
const tab2 = this.$refs['Extable2'].bodyWrapper
this.$nextTick(() => {
tab1.scrollTop = tab2.scrollTop
})
},
tableRowClassName({ rowIndex }) {
if (this.uindex.includes(rowIndex)) {
return 'update-row'
}
if (this.delindex.includes(rowIndex)) {
return 'delete-row'
}
},
tableRowClass({ rowIndex }) {
if (rowIndex > this.addindex) {
return 'add-row'
} else {
if (this.uindex.includes(rowIndex)) {
return 'update-row'
}
if (this.delindex.includes(rowIndex)) {
return 'delete-row'
}
}
},
indexMethod(index) {
return index + 1
},
downEx() {
service.downloadEx(this.subex_forms).then(res => {
this.download(res)
})
},
// 下载excel数据表格
download(data) {
if (!data) {
return
}
var blob = new Blob([data], {
type:
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
})
var url = window.URL.createObjectURL(blob)
var aLink = document.createElement('a')
aLink.style.display = 'none'
aLink.download = '基线核查结果.xls'
aLink.href = url
document.body.appendChild(aLink)
aLink.click()
document.body.removeChild(aLink) // 下载完成移除元素
window.URL.revokeObjectURL(url)
},
}
style样式:
.el-table .add-row {
background: #42b983;
}
.el-table .update-row {
background: #f19e04;
}
.el-table .delete-row {
background: rgb(247, 120, 88);
}
这里,数据处理部分的代码,我没有展现主要是没有什么利用价值,每个需求所需要的数据都不一样,这里就不在展示,
你如果使用只需要把数据处理成elementui表格数据的规范就可以了。