el-table合并行过程中遇到的问题

最新推荐文章于 2024-03-12 08:25:11 发布

孤寂的雪

最新推荐文章于 2024-03-12 08:25:11 发布

阅读量2k

点赞数 3

分类专栏：一天一bug 文章标签：前端

本文链接：https://blog.csdn.net/qq_45181103/article/details/127395990

版权

一天一bug 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一起因

有遇到一个前端展示页面遇到需要合并相同行的需求，第一次接触遇到了各种问题，我也找了百度，最终磕磕绊绊下中了出来，代码跟网上的差不多一样，我重点讲一下我遇到的问题

二遇到的问题

需求：同一个任务名称合并

这是2幅图，初始图就是直接从后端得到数据，前端直接展示的，未做任何处理，效果图就是最终实现的

初始图

效果图

难点

1 不熟悉，第一次接触

2 如何让相同的任务名称在一起

3 怎么合并

解决

element 上面有一个方法span-method

我就结合自己的代码来讲一下

如果大家有看过其它帖子，应该大部分都是例子，然后数据已经是排序好的，就可能给初学者造成一定的难度-没思路解决排序的问题

我这里给出我自己的代码

List<ResearchTasks> tasks = resourceReserveMapper.selectResearchTasksList(researchTasks);
        ArrayList<ResearchTasks> temporaryList = new ArrayList<>();
        //排序，使相同名字的数据在相邻的地方
        List<String> collect = tasks.stream().map(ResearchTasks::getName).distinct().collect(Collectors.toList());

        for (int i = 0; i < collect.size(); i++) {
            for (int j = 0; j <tasks.size() ; j++) {
                if (collect.get(i).equals(tasks.get(j).getName())){
                    temporaryList.add(tasks.get(j));
                }
            }
        }


        return temporaryList;

tasks就是未做处理的数据，temporaryList就是排序好的数据，我先用stream流的方式将初始数据的任务名称都得到然后去除重复的，然后双层循环判断，这样就实现了相同任务名称的数据都在相邻的地方

然后回到前端，如何实现动态合并行

 rowspan() {
      console.log(this.planList)
      this.planList.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
        } else {
          if(this.planList[index].name === this.planList [index - 1].name) {
            this.spanArr[this.position] += 1  //相同值第一个出现的位置，统计需要合并多少行,指针往后移动一位
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.position = index
          }
        }
      })

    },
    //合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log('rowIndex', rowIndex) // 0, 1, 2, 3
        console.log('spanArr', this.spanArr) // [2, 0, 2, 0]
        console.log('_row', _row)
        console.log('_col', _col)
        return {
          rowspan: _row,
          colspan: _col
        }

      }
    },

前端坑特别多，rowspan方法最好执行一次，在created里执行，但是我不知道为什么没有得到后端返回的数据，明明得到planlist数据在rowspan方法前面执行，然后就想出办法在得到后端数据里方法再执行rowspan方法，然后又因为getlist方法执行了2次，导致rowspan方法执行了2次，导致spanarr数组存了2遍值，当时是真的找了好久的问题啊，可不是现在三言两语就讲清楚了

解决办法就是先吧数组放空