VUE el-table合并单元格,相同数据列合并(并实现表格行滚动)

VUE el-table合并单元格,相同数据列合并

  • 需求
  • 动态合并单元格
  • 行滚动
  • 展现效果

需求

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

动态合并单元格

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

展现效果

VUE el-table合并单元格,相同数据列合并(并实现表格行滚动)_第1张图片

你可能感兴趣的:(VUE,vue.js,javascript,前端)