详解element-ui表格的合并行和列(非常细节)

<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
    <el-table-column
        prop="id"
        label="ID"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名">
    </el-table-column>
    <el-table-column
        prop="amount1"
        label="数值 1（元）">
    </el-table-column>
    <el-table-column
        prop="amount2"
        label="数值 2（元）">
    </el-table-column>
    <el-table-column
        prop="amount3"
        label="数值 3（元）">
    </el-table-column>
</el-table>
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }

:span-method="objectSpanMethod"
// 这是在table标签中定义的一个变量，变量值是一个方法，用这个方法去处理然后完成行列合并

objectSpanMethod({ row, column, rowIndex, columnIndex })
// 由它给的文档我们可以知道、方法会被固定传入一个对象，对象中有上述 4 个变量，其作用是：
/*
	row: 获取此行的全部数据，即你需要传入且展示的数据
	column：获取列的结构及其数据、注意此时列的数据不是指我们传入的数据、而是饿了么自己定义的列结构。
	rowIndex：行号，这个行号表示当前是第几行
	columnIndex：列号，表示当前是第几列
*/
// 相信我虽然解释了变量意义，但是你还是不明白、因为我还有东西没解释。。。

:span-method="objectSpanMethod"
...
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    ...
}

if (columnIndex === 0) {  // columnIndex：表示是第几 列 
    if (rowIndex % 2 === 0) { // rowIndex：表示是第几行
        return {
            rowspan: 2,		// 2：需要合并的行数
            colspan: 1		// 1：需要合并的列数
        };
    } else {
        return {
            rowspan: 0,     // 0：只要是0，都代表着不显示
            colspan: 0
        };
    }

if (columnIndex === 0 || columnIndex === 1) {  // columnIndex：表示是第几 列 
    ...
    }

if (columnIndex === 0) {  // columnIndex：表示是第几 列 
    ===================================================
    =if (rowIndex % 2 === 0) { // rowIndex：表示是第几行=
    ===================================================
        return {
            ======================================
            =	rowspan: 2,	// 2：需要合并的行数    =
            ======================================    
            colspan: 1		// 1：需要合并的列数
        };
    } else {
        return {
            rowspan: 0,     // 0：只要是0，都代表着不显示
            colspan: 0
        };
    }

在return中定义两个变量(我使用的是vue，你们可按需改变，本意思定义全局变量)：      
		spanArr:[], // 需要合并的行数
      	pos:0,// 索引
getSpanArr(data) {
    // 遍历数据
    for (let i = 0; i < data.length; i++) {
        // 如果是第一个数据，就将列表spanArr添加一个1，表示暂时只有一个名字相同的、且将索引pos赋值为0
        if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0
        } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i].name === data[i - 1].name) {
                // 如果相同就将索引为 pos 的值加一
                this.spanArr[this.pos] += 1;
                // 且将数组添加 0 
                this.spanArr.push(0);
            } else {
                // 如果元素不同了，就可以通过索引为 pos 的值知晓应该需要合并的行数
                // 同时，我们再次添加一个值1，表示重新开始判断重复姓名的次数
                this.spanArr.push(1);
                // 同时 索引加一
                this.pos = i;
            }
        }
    }
    console.log("索引数组：")
    console.log(this.spanArr)
},
===================
/*
spanArr最终的值格式是：
[3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0, 3, 0, 0]
3代表需要合并的行数，0代表此单元格需要被隐藏(当然这个作用会在`objectSpanMethod` 方法中体现，现在只是准备数据)
*/
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
    /* 此方法总共运行次数与有几列几行有关，如果有5列30行，那么都是从0开始作为第一行第一列，
      (行，列):0,0 0,1 0,2 0,3 0,4 0,5 1,0...*/
    // 0,1,5表示需要处理 第 1，2，5列的行进行合并处理
    if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) {
        /* 
        将需要合并的行数赋值给 _row，注意这里由上一个方法的输出可以知道，这里的值可以是 3或者0
        当为 3 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格向下合并 _row 格
        当为 0 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格隐藏
        */
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
            rowspan: _row,
            colspan: _col
        }
    }
},