element ui 表格有相同的数据如何合并单元格

近期做项目,遇到了element ui需要根据数据是否一致合并显示表格的需求。结合了饿了么的官网写出一下demo

这个span-method就是合并的关键

	// 列表方法
		objectSpanMethod:function(obj) {
			if (obj.columnIndex === 0 || obj.columnIndex === 1||obj.columnIndex === 2) {
				// 二维数组存储的数据 取出
				var _row = this.spanArr[obj.rowIndex]
				var _col = _row > 0 ? 1 : 0
				return {
					rowspan: _row,
					colspan: _col
				}
			} else {
				return false
			}
		},

    getSpanArr:function(data) {
			var vm = this;
			vm.spanArr = [];
			vm.pos = 0;
			data.forEach(function(item, index){
				//判断是否是第一项
				if (index === 0) {
					vm.spanArr.push(1);
					vm.pos = 0;
				} else {
					//不是第一项时，就根据标识去存储
					if (data[index].scheduleDate === data[index - 1].scheduleDate && data[index].ecourseTimeId === data[index - 1].ecourseTimeId
					&& data[index].roomId === data[index - 1].roomId) {
						// 查找到符合条件的数据时每次要把之前存储的数据+1
						vm.spanArr[vm.pos] += 1;
						vm.spanArr.push(0);
					} else {
						// 没有符合的数据时，要记住当前的index
						vm.spanArr.push(1);
						vm.pos = index
					}
				}
			});
		},

//此处为数据调用，合并单元格
vm.getSpanArr(vm.orderList);

objectSpanMethod里面的

obj.columnIndex代表需要合并的第几行，此处我是，第1,2,3，下标从0开始所以是0,1,2

getSpanArr这个方法是对数据进行遍历，判断是否进行合并上面的注释已经很清楚了

最后的效果就是这样了