element中表格合并单元格

最近要写一个如下图的项目,需要合并单元格

<el-table :data="list" border style="width: 1000px;"  :span-method="objectSpanMethod">
   <el-table-column align="center" prop="frist_name" :label="list[0].specName" ></el-table-column>
   <el-table-column align="center" prop="second_name" :label="list[0].specName1"></el-table-column>
   <el-table-column align="center" prop="price" label="价格"></el-table-column>				
</el-table>

  其中  objectSpanMethod方法是合并单元格的关键,以下代码需要赋值

     mergeObj:{},
              mergeCol:['frist_name'],
getSpanArr(list){
	this.mergeCol.forEach(key=>{
	  let count=0//记了了起始位置
	  this.mergeObj[key]=[];//记录每-列的合并信息
	  list.forEach((item,index)=>{// index == 0表示数据为第一行,直接 push 一个 1
			if(index === 0){
				this.mergeObj[key].push(1)
			} else {
				// 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1
				if(item[key]=== list[index-1][key]){
					this.mergeObj[key][count] += 1;
					this.mergeObj[key].push(0);
				} else {
					// 如果当前行和上一行其值不相等
					count = index;//记录当前位置
					this.mergeObj[key].push(1);//重新push一个1
				}
			}
		})
	})
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
		if(this.specsList.length!=1){
			if(this.mergeCol.indexOf(column.property)!==-1){
				// 判断其值是否为0
				if(this.mergeObj[column.property][rowIndex]){
					return[this.mergeObj[column.property][rowIndex],1]
				}else{
					return[0,0]
				}
			}
		}
},

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值