需求

需要第一列相同的数据进行合并单元格，并且实现滚动。
本来使用的是固定的行列合并，但由于后续的需求增加了行滚动，就需要动态的合并单元格

动态合并单元格

• 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);
      });
    },

展现效果