elementUI table 第一列值相等合并

效果如下：

 

首先：在table上加:span-method="spanMethod"

 

 

 其次：

methods中加两个方法

dataPretreatment() {
				//表格数据列合并预处理,生成一个与行数相同的数组记录每一行设置的合并数
				// 如果是第一条记录（索引为0），向数组中加入1，并设置索引位置；
				// 如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，
				// 则向mergingRows中添入元素0，并将前一位元素+1，表示合并行数+1，
				// 以此往复，得到所有行的合并数，0即表示该行不显示。
				for (let i = 0; i < this.tableData.length; i++) { // tabledata 表格数据源
				 if (i === 0) {
						this.mergingRows.push(1)
						this.mergingPos = 0
					} else {
						if (this.tableData[i].level === this.tableData[i - 1].level) { //哪些数据是要合并的 合并的条件是什么
							this.mergingRows[this.mergingPos] += 1
							this.mergingRows.push(0)
						} else {
							this.mergingRows.push(1)
							this.mergingPos = i
						}
					}
				}
			},
			spanMethod({row,column,rowIndex,columnIndex}) {
				if (columnIndex === 0) { //第一列
					const _row = this.mergingRows[rowIndex];
					const _col = _row > 0 ? 1 : 0;
					return {
						rowspan: _row,
						colspan: _col
					}
				}
			},

 

 最后在created中调用 dataPretreatment() 方法。

 

结。