关于 el-element 表格合并后 渲染多出几行或几列的问题

问题发现

因项目需要临时更新一些数据 直接插入数据后发现数据渲染有问题

表格
  <el-table style="width: 100%" :data="progressTableDataCol" class="progressTable" :highlight-current-row="false"}"
    ref="refreshTable" :span-method="objectSpanMethod1" :header-cell-style="mergeHeader" >
    <el-table-column label="施工项" fixed align="center" style="border-right:none;" prop="label">
    </el-table-column>
    <el-table-column label="" fixed align="center" prop="parentLabel">
    </el-table-column>
    <el-table-column
       v-for="(item, i) in progressTableDataRow" 
       :key="i" 
       :label="item.label" 
       align="center" >
       <el-table-column
         v-for="(items, index) in item.children"
         :key="index + items.label" 
         :label="items.label"
         align="center" >
         <template slot-scope="scope" v-if="scope.row[items.value]">
           <div class="tableBox">
             <span>{{ scope.row[items.value] }}</span><br />
           </div>
         </template>
	    </el-table-column>
	  </el-table-column>
	</el-table>

需要渲染的数据
this.progressTableDataCol = 
            [{
                label: "单桩",
                parentLabel: "制作完成",
              },
              {
                label: "单桩",
                parentLabel:"沉桩完成",
                "22": "2022.5.9",
                "7": "2022.5.7",
              },
              {
                label: "塔筒",
                parentLabel: "制作完成",
              },
              {
                label: "塔筒",
                parentLabel: "吊装完成",
              },
            ]
      }

表头合并的方法
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        }
        if (rowIndex === 2) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        }
      }
    },

渲染出来的效果

当时就是感到很莫名其妙发现会无缘无故多出一列 导致数据往后偏移一位 查看代码后发现一个很容易遗漏的问题 就是在合并列或者行之后 应对被合并的行或列也进行处理

表头合并的方法
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        }
        // 只需要把被合并的单元格设置为0就行
        if (rowIndex === 1) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
        if (rowIndex === 2) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        }
         // 只需要把被合并的单元格设置为0就行
        if (rowIndex === 3) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },

更新 大佬写法

最近有看到一个更加详细的博客 完全实现各种方向的合并 有兴趣可以看一下大佬原文Element-UI el-table 表格动态合并行和列