vue element ui Table 动态 相邻 合并单元格

合并单元格方法

在element ui 有合并单元格的方法 如下

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {  //判断第几列合并
          if (rowIndex % 2 === 0) { 这个是要判断合并几个单元格
            return {
              rowspan: 2, //合并单元格个数
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

此方法有四个参数 分部为 行信息 列信息 行索引 列索引

思路 我们需要这样一个数组[1,1,3,0,0,2,0]
如果有了这样一个数组我们放在element ui 里面就非常方便了 每个数组代表合并单元格的个数 为0删除当前行
下面是方法跟dome

	var arr = [
        {
          id: 1
        },
        {
          id: 1
        },
        {
          id: 2
        },
        {
          id: 3
        },
        {
          id: 1
        },
        {
          id: 1
        },
        {
          id: 1
        }
      ];
      function mergeCell(arr, key) {
        var margeDate = [];
        for (let i = 0; i < arr.length; i++) {
          let num = 0; //相邻个数
          let test = 1; //判断下一次为不对等的变量
          if (arr[i][key] != null) {
            for (let j = 0; j < arr.length; j++) {
              if (arr[i][key] == arr[j][key]) {
                //判断对等数值
                num += 1; //相邻数值个数
                test = 2; //判断变量 改变数字
              }
              if (test == 2) {
                //进入判断条件 判断对等数值完后第一次出现的不对等 或者最后一次判断
                if (arr[i][key] != arr[j][key] || j == arr.length - 1) {
                  for (let k = 0; k < arr.length; k++) {
                    //再次循环 目的是为了 吧先前判断过的对等值标记
                    if (arr[k][key] != null) {
                      for (let p = 0; p < num; p++) {
                        arr[k + p][key] = null; //做完判断的对等值标记 这样不能让标记的对象属性 进行判断
                      }
                      break;
                    }
                  }
                  margeDate.push(num);
                  break;
                }
              }
            }
          }
        }
        let margeCellDate = [];
        margeDate.forEach(d => {
          if (d > 1) {
            margeCellDate.push(d);
            for (let i = 1; i < d; i++) {
              margeCellDate.push(0);
            }
          } else if (d == 1) {
            margeCellDate.push(1);
          }
        });
        return margeCellDate;
      }

最后得到的数组[2, 0, 1, 1, 3, 0, 0] 这样放在element 方法里就行了

重点 这个方法 要拿到数据的时候对数据 使用 不能放在el 合并方法里面使用 不然会出现死循环

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (margeCellDate[column["property"]][rowIndex] > 0) {
        return {
          rowspan: margeCellDate[column["property"]][rowIndex],
          colspan: 1
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    }