element-plus 表格单元格的合并

1、效果如下： 

 

2、逻辑如下：

list 就是我们从后台拿到的表格列表数据，通常是一个数组；

spanArr 是一个空的数组，用于存放每一行记录的合并数；

pos 是 spanArr 的索引。

以下代码的意思是：如果是第一条记录（索引为０），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素０，并将前一位元素＋１，表示合并行数＋１，以此往复，得到所有行的合并数，０即表示该行不显示。

            getSpanArr(list) {
                let pos = 0
                for (let i = 0; i < list.length; i++) {
                    if (i === 0) {
                        data.spanArr.push(1);
                        pos = 0
                    } else {
                        // 判断当前元素与上一个元素是否相同
                        if (list[i].company === list[i - 1].company) {
                            data.spanArr[pos] += 1;
                            data.spanArr.push(0);
                        } else {
                            data.spanArr.push(1);
                            pos = i;
                        }
                    }
                }
            },

            // 合并行
            objectSpanMethod({ rowIndex, columnIndex }) {
                if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
                    const _row = data.spanArr[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row, // 合并的行数
                        colspan: _col // 合并的列数，设为０则直接不显示
                    }
                }
            },

3、注意：

如果存在鼠标滑过，显示错位的问题，可看这里 element-ui 实现行合并_小白变怪兽的博客-CSDN博客