element table表格合并行列思路

对el-table进行合并行或列需要在el-table标签添加合并方法 span-method。

<el-table  :data="tableData"  :span-method="arraySpanMethod"></el-table>

查看官方的合并方法arraySpanMethod的实现

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

方法参数为每行的行内数据，也就是tabledata数组中的对应项。
返回值为行列占比 rowspan: 2,colspan: 1 表示两行一列 也就是当前行占两行一列。
在此方法内进行判断明显不太方便，无法将列表的多行进行比较，我选择先通过其他方法预处理，将tabledata数据各行所占行列先计算出，填充到每行的数据中。

dealData:function(){
                //先给所有数据加上rowspan
                for (var index = 0; index < this.tableData.length; index++) {
                    this.tableData[index].rowspan = 1;
                }
                var errorCheck = 0;
                for (let i = 0; i < this.tableData.length; i++) {
                    // 内层循环，上面已经给所有的行都加了item.rowspan = 1
                    // 如果当前行的id和下一行的id相等
                    // 就把当前item.rowspan + 1
                    // 下一行的item.rowspan - 1
                    for (let j = i + 1; j < this.tableData.length; j++) {
                        //此处可根据相同字段进行合并，此处是根据的id
                        if (this.tableData[i].guid === this.tableData[j].guid) {
                            this.tableData[i].rowspan++;
                            this.tableData[j].rowspan--;
                        }
                    }
                    // 这里跳过已经重复的数据
                    errorCheck = i;
                    i = i + this.tableData[i].rowspan - 1;

                    if(errorCheck > i || i < 0){   //errorCheck是上一个数据的索引 不可能比当前的数据索引大  相同id数据不相邻可能会引起此错误造成死循环
                        alert('数据顺序错误，单元合并失败！');
                        return
                    }
                }
            },

此时tabledata每行应该占几行已经有rowspan属性记录，我们改写合并方法

arraySpanMethod:function(obj){
                    return {
                        rowspan: obj.row.rowspan,
                        colspan: 1,
                    };
            },

合并列思路相同