实现页面表格的随机行合并，项目实践

 此表格因为需求需要把第一列前四行进行合并，然后后面再合并3行，最后留一行；用element-plus提供的合并方法试了半天终于实现了。

 

 这里是element-plus得表格方法，objectSpanMethod为合并的api；

<el-col :span="14" class="charts-container-list-table">
						<el-table
						:data="props.multipDate_zc"
						:span-method="objectSpanMethod" //该事件为控制行合并
						style="width: 100%; margin-top: 20px;"
						:cell-style="handleChangeCellStyle"
						@cell-click="cellClick"
						:header-cell-style="{   //此处为表头的修改随机颜色
							// color:'black',
							background:'linear-gradient(to top,rgba(213,234,249,1) 0%,rgba(213,234,249,0) 60%, rgba(213,234,249,0) 100%) !important',
							// border:'none',
						}">
							<el-table-column prop="资产类型" label="资产类型" align="center" width="110"/>
							<el-table-column prop="资产项目" label="资产项目" align="center" width="95"/>
							<el-table-column prop="金额(万元)" label="金额(万元)" align="center" width="150"/>
							<el-table-column prop="占比(%)" label="占比(%)" align="center"  width="90"/>
						</el-table>

 这里是合并所需要写的方法

// 合并表格行
const objectSpanMethod= ({row,column,rowIndex,columnIndex,})=> {
	if (columnIndex === 0) {
		if (rowIndex  === 0) {
			return {
				rowspan: 4,
				colspan: 1,
			}
		}else if(rowIndex < 4){
			return {
				rowspan: 1,
				colspan: 0,
			}
		}else if(rowIndex === 4 ){
			return {
				rowspan: 3,
				colspan: 1,
			}
		}else if(rowIndex > 4 && rowIndex < 7){
			return {
				rowspan: 1,
				colspan: 0,
			}
		}
	}
}

 最终效果如下：