首页 > 其他分享 >elementUI table 第一列值相等合并

elementUI table 第一列值相等合并

时间:2022-11-08 12:02:02浏览次数:49  
标签:elementUI 合并 push mergingRows 第一列 table mergingPos row

效果如下:

 

首先:在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() 方法。

 

结。

 


标签:elementUI,合并,push,mergingRows,第一列,table,mergingPos,row
From: https://www.cnblogs.com/yeziyou/p/16869208.html

相关文章