Element-UI的Table指定列相同数据进行合并
  Ti0viqvZKbnX 2023年11月02日 17 0

一、效果图

1、原图效果

Element-UI的Table指定列相同数据进行合并_Elemen-UI

2、目标效果

Element-UI的Table指定列相同数据进行合并_Elemen-UI_02

二、实现代码

#使用提供的:span-method="handleSpanMethod"方法进行合并处理

handleSpanMethod({row, column, rowIndex, columnIndex}) {
  if (columnIndex === 0) {
    const _row = this.filterData(this.tableData, columnIndex).one[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row, //合并行数
      colspan: _col, //合并列数
    }
  }
},
  filterData(arr, colIndex) {
    let spanOneArr = [];
    let concatOne = 0;
    arr.forEach((item, index) => {
      if (index === 0) {
        spanOneArr.push(1);
      } else {
        if (colIndex === 0) {
          if (item.nodeParentName === arr[index - 1].nodeParentName) {
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      }
    });
    return {
      one: spanOneArr,
    };
  }
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

Ti0viqvZKbnX