需求
需要第一列相同的数据进行合并单元格,并且实现滚动。
本来使用的是固定的行列合并,但由于后续的需求增加了行滚动,就需要动态的合并单元格
动态合并单元格
- HTML
<el-table
ref="addResPaperTable"
v-loading="repeatListLoading"
:data="repeatList"
:span-method="toMergeColumn"
height="500"
element-loading-text="Loading"
border
fit
stripe
>
- 逻辑代码
//合并单元格调用方法
toMergeColumn({row, column, rowIndex, columnIndex}){
if (columnIndex === 0 ) {
/*
表格数据:this.tableList
判断合并行数:this.mergeColumn()
*/
const _row = (this.mergeColumn(this.tableList).one)[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
//判断合并行数
mergeColumn(data){
const spanOneArr = []
let concatOne = 0
data.forEach(( item, index ) => {
if (index === 0){
spanOneArr.push(1)
} else {
//name 修改
if (item.section=== data[index - 1].section){ //第一列需合并相同内容的字段
spanOneArr[concatOne] += 1
spanOneArr.push(0)
} else {
spanOneArr.push(1)
concatOne = index
}
}
})
return {
one: spanOneArr
}
},
行滚动
// 是否滚动:isScroll(默认为true)
getSecondTable (isScroll=true) {
var this_ = this
this.$nextTick(() => {
//当有一个表格时,默认为0
let div = document.getElementsByClassName("el-table__body-wrapper")[0];
let t = document.getElementsByClassName("el-table__body")[0];
clearInterval(this.tableTimerSecond);
this.tableTimerSecond = setInterval(() => {
if (isScroll) {
/*
dataQty:表格数据
*/
var data = this_.dataQty[0];
//末端填充数据
setTimeout(() => {
this_.dataQty.push(data);
t.style.transition = "all 0s";
t.style.marginTop = "-30px";
}, 0);
//首端删除数据,达到伪滚动效果
setTimeout(() => {
this_.dataQty.splice(0, 1);
t.style.transition = "all 0s ease 0s";
t.style.marginTop = "0";
}, 0);
}
}, 3000);
});
},