element中table合并行或列后出现格式错乱的问题

快速查找问题： ！！！出现格式错乱的问题可能是没有让被合并的单元格返回 [0,0] 

碰到出现错乱的情况：刚开始布局表格时（很容易发现有错乱）

                                表格里有一部分内容是for循环出来的，这种可能在缩放浏览器的时候出现错乱

接下来是保姆级别的用法，有需要的可以一观

目标样式

 所有代码，重点就是objectSpanMethod方法，该方法详细注释都在代码里

<template>
  <el-card style="width: 100%" shadow="never">
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="age" label="Age" />
      <el-table-column prop="mother" label="Mother" />
      <el-table-column prop="father" label="Father" />
    </el-table>
  </el-card>
</template>

<script setup>
/**
 * 合并行或列的计算方式
 * row: 当前单元格所在的行数据
 * column: 当前单元格所在的列数据
 * rowIndex: 当前单元格所在的行索引，从0开始
 * columnIndex: 当前单元格所在的列索引，从0开始
 * */
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  //列索引为2（第三列）或者列索引为3（第四列）
  if (columnIndex === 2 || columnIndex === 3) {  
    //行索引为1（第二行）
    if (rowIndex === 1) {
      //从第三（四）列第二行开始，合并三行一列，
      return [3, 1];  //这里提一句，从哪一格开始合并数据就显示的是哪一格,                
                        具体看father这一块数据
    } 
    //这句一定要加，被合并的表格需要返回0，0  不然格式可能会错乱
    else if (rowIndex === 2 || rowIndex === 3) {
      return [0, 0]; 
    }
  }
};

// 数据
const tableData = [
  {
    name: "小粉",
    age: "12",
    mother: "Emma",
    father: "John"
  },
  {
    name: "小红",
    age: "12",
    mother: "Anna",
    father: "Bob"
  },
  {
    name: "小绿",
    age: "17",
    mother: "Anna",
    father: "Peter"
  },
  {
    name: "小蓝",
    age: "3",
    mother: "Anna",
    father: "Doe"
  }
];
</script>
<style scoped>
table {
  table-layout: fixed;
  width: 100%;
  border: 1px solid red;
}
</style>