项目一直用的vxe-table 2.0版本,支持表格的虚拟滚动,最近要做表格合并行功能,虚拟滚动便失效了,强行虚拟滚动,合并行会有错行现象。
vxe-table2.0给出的解释是:合并行不能和虚拟滚动一起使用。
目前找到两种解决方式:
1.升级表格到3.0版本
vxe-table3.0支持合并行虚拟滚动,但是它支持的是临时合并状态的表格,我们用的一般都是span-methods自定义合并函数。
比如,这种写法是一行一行比较,遇到adjustDicName和commonId相同的就把'index', 'adjustDicName', 'wantNum', 'totalPlanNum', 'zbPrice', 'forwardNum', 'prevForwardMoney', 'unscheduledNum',这些字段都合并了。
但这种在vxe-table3.0也是不支持虚拟滚动的。
// 合并规则
rowspanMethod({
row,
_rowIndex,
column,
visibleData
}) {
let fields = ['index', 'adjustDicName', 'wantNum', 'totalPlanNum', 'zbPrice', 'forwardNum', 'prevForwardMoney', 'unscheduledNum']
let cellValue = row[column.property]
let xtmcCell = row['adjustDicName']
let xtmcCell2 = row['commonId']
if (fields.includes(column.property)) {
let prevRow = visibleData[_rowIndex - 1]
let nextRow = visibleData[_rowIndex + 1]
if (prevRow && prevRow[column.property] == cellValue && prevRow['adjustDicName'] == xtmcCell && prevRow['commonId'] == xtmcCell2) {
return {
rowspan: 0,
colspan: 0
}
} else {
let countRowspan = 1
while (nextRow && nextRow[column.property] == cellValue && nextRow['adjustDicName'] == xtmcCell && nextRow['commonId'] == xtmcCell2) {
nextRow = visibleData[++countRowspan + _rowIndex]
}
if (countRowspan > 1) {
return {
rowspan: countRowspan,
colspan: 1
}
}
}
}
},
看官网例子vxe-table v3
可以通过 merge-cells 做临时合并,我们只要把表格的需要合并状态全部计算提取出来,便可以实现合并行的虚拟滚动。
怎么提取呢?
把需要合并的第一行给你一个标志,比如 以下三行合并num:3, 以下一行合并num:1, 剩下的为num:0
处理数据:
handleListRowSpan() {
let prevItem
this.tableData.forEach(item => {
item.num = 0
if (prevItem && prevItem.adjustDicName == item.adjustDicName && prevItem.commonId == item.commonId) {
prevItem.num++
} else {
item.num = 1 // 初始化合并行数
prevItem = item
}
})
console.log('this.tableData',this.tableData)
let arr=[]
this.tableData.forEach((ele,index)=>{
if(ele.num>1){
arr.push({row:index,col:0,rowspan:ele.num,colspan:1})
arr.push({row:index,col:1,rowspan:ele.num,colspan:1})
arr.push({row:index,col:2,rowspan:ele.num,colspan:1})
arr.push({row:index,col:3,rowspan:ele.num,colspan:1})
arr.push({row:index,col:4,rowspan:ele.num,colspan:1})
arr.push({row:index,col:5,rowspan:ele.num,colspan:1})
arr.push({row:index,col:6,rowspan:ele.num,colspan:1})
arr.push({row:index,col:7,rowspan:ele.num,colspan:1})
}
})
console.log('this.mergeCells,',arr)
this.mergeCells=arr
},
第一个循环是把处理成带num:合并行数 或者 num:0 标识的数据
第二个循环是把数据处理成mergeCells需要的数据格式,row:第几行,col:第几列,rowSpan:合并几行,colSpan:合并几列。
灵感来源于这个博友的文章:element-ui表格,el-table多级合并行_element puls 中的tabel表格实现多层级合并-CSDN博客
2.使用el-table-virtual-scroll表格
官网api:el-table-virtual-scroll
这个表格也是支持虚拟滚动和合并行一起使用的。具体可以自己看官网,但是他的表格功能没有vxe-table丰富,如果使用,之前的逻辑的逻辑要改的太多,便没有采用。
总结:方法一:升级表格,对当前需要虚拟加载的合并行表格页面修改的不多,但是升级表格会有系统有不可预知的影响,比如一些废弃的api需要更换,我们之前用的vxe-table-plugin-virtual-tree需要依赖于vxe-table2.0,升级后组件虚拟滚动功能会失效(如何解决下一篇写)等等。在项目前期使用较好。
方法二,换表格,在项目后期使用较好,对系统其他模块没有影响,但是很多功能没有vxe-table齐全。