Element-UI动态表格合并导致触发Vue视图更新，从而无限循环问题

1.前言

	在做一个项目的时候，遇到一个需求，需要根据后台返回的数据，动态的进行表格合并，比如下面这种。

这个Element官网示例是每两列合并一行，或者没两行合并一列的规则。（当然会有一些限制条件），但是我们实际项目开发中，肯定不可能写死，而是需要根据数据进行动态的渲染，于是乎就遇到这么一个问题。

2.问题

第0列是表头标志列，这列的数据会有重复项，比如，第0列为ID，然后返回的数据中ID的数据为[1,2,2,3,4,5,5,5,6]，那么2这个ID就需要合并，占得单元格就应该是2行1列，因为对应的有两条记录，5这个ID也需要合并,占3行一列，因为对应了三条记录。然后设计代码实现的时候，Vue报了无限循环的错误

3.解决代码

methods:{
	objectSpanMethod({ row, column, rowIndex, columnIndex }){
          if (columnIndex === 0)
          {
            if (index>this.res.length-1)
            {
              index = 0;
              currentBeginRowIndex = -1;
            }
              if(rowIndex > currentBeginRowIndex)
              {
                let sameLength = this.res[index].record_list.length;
                index++;
                currentBeginRowIndex = currentBeginRowIndex + sameLength;
                return {
                  rowspan: sameLength,
                  colspan: 1
                };
              }
              else
              {
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
    }
}

res为ID相同条数的记录数组，比如对于上述[1,2,2,3,4,5,5,5,6]来说，res = [1,2,1,1,3,1]，也就是说这个res的长度就是有多少个不同的数据项，并且对应着每个不同的数据项的个数。
index就是res数组的下标。
currentBeginIndex就是当前数据项结尾，下一个数据开始渲染的标志位。
这里需要注意的是，一定要把index和currentBeginIndex定义为全局变量，不然就会报无限循环的错误。因为View数据更新会触发视图更新，视图更新又会调用绑定的Element-UI绑定的格式化方法，从而导致View数据更新，导致无限循环。放在data外面就可以避免这种问题。![在这里插入图片描述](https://img-blog.csdnimg.cn/20200930101009754.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM5NjM2OQ==,size_16,color_FFFFFF,t_70#pic_center