element 表格行合并问题

前几天遇到一个需要合并行的表格，需求如图

Image 006.png

合并行分两种，一种是后端分页，一种是前端分页

一、先来讲后端分页
element中的表格自带一个属性 span-method

     <el-table
          :data="tableData.slice((page - 1) * pageSize, page * pageSize)"
          border
          style="width: 100%"
          :max-height="tableHeight"
          class="tableRowHeight"
          :cell-style="{ 'font-size': '8px' }"
          :header-cell-style="{ 'font-size': '8px' }"
          :span-method="arraySpanMethod"
        >
   // 合并行功能
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    //这里表示第一列，rowspan大于等于1就返回colspan为1，rowspan为0就返回colspan为0
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }
    },

此方法中{ rowspan: 5,colspan: 1 }，返回的如下图，当前列的一格对应右边列的5格

Image 005.png

我们就只需要对数据处理，生成一个能够让span-method处理合并行的数据列表

 // 表格行合并的数据处理
    dealWithData() {
      const result = [];
      let pos = 0;
      console.log("this.tableData",this.tableData);
      const data = this.tableData;
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          // 如果是第一条记录（即索引是0的时候），向数组中加入１
          result.push(1);
          pos = 0;
        } else {
          // 这里bitCityName 是数据里用到的字段，自行修改
          if (data[i].bitCityName === data[i - 1].bitCityName) {
            // 如果相等就累加，并且push 0（表示删除后面的格）
            result[pos] += 1;
            result.push(0);
          } else {
            // 不相等push 1
            result.push(1);
            pos = i;
          }
        }
      }
      this.spanArr = result;
   console.log("this.spanArr", this.spanArr, "pos", result[pos], pos);
    },

以上就是后端分页的处理方式，利用接口查询回来的数据进行处理后再渲染
如果是用的前端分页的方法，道理也很简单，先用slice方法进行数组分割

  :data="tableData.slice((page - 1) * pageSize, page * pageSize)"

每换一次页或者页码再把当前分割后的tableData再调用上面所示的dealWithData()方法再进行一次数据处理再显示出来就好了

以上是我使用的方法，如果有大佬有更好的方法希望可以提出来
谢谢