table合并

一下表格基于element-ui的table进行举栗子。

一：行单元格合并(一行左右相邻的单元格)

接上一篇合计行相邻右侧的单元格合并。

<el-table
    :data="tableData"
    border
    style="width: 100%"
	id='tableID'
>
</el-table>

<script>
watch:{
	tableData:{
		immediate:true,
		handler(){
			setTimeout(()=>{
				const tds=document.querySelectAll('#tableID .el-table__footer-wrapper tr>td');
				tds[0].colSpan=2;
				tds[0].style.textAlign='right';
				tds[1].style.display='none';
			},0)
		}
	}
}
</script>
<style>
.el-table >>> .el-table__fixed{
	display:flex;
	flex-direction:colum;
}
.el-table >>> .el-table__fixed-footer-wrapper,
.el-table >>> .el-table__fixed-body-wrapper,
.el-table >>> .el-table__fixed-header-wrapper{
	position:initial;
}
.el-table >>> .el-table__fixed-body-wrapper{
	order:1,	
}
.el-table >>> .el-table__fixed-footer-wrapper tbody td.el-table_cell{
	border-top:none;
	background:black;
	color:white;
	font-weight:bolder;
}
.el-table >>> .el-table__fixed::before{
	height:0
}
</style>

二：列单元格合并（同一列上下相邻单元格）

若是没有规律的合并，需要看后端能否确认哪些能合并，并返给前端一个标志类型的字段，前端判断相同类型的进行合并。
举个栗子：
后端返回类型字段为minitorType=‘类型一’；
table表绑定方法 :span-methods=‘objectSpanMethod’

objectSpanMethod({row,column,rowIndex,columnIndex}){
//这里假设后端返回类型字段为minitorType需要展示在第一列
	if(columnIndex===0){
		const _row=this.filterData(this.tableData).one[rowIndex];
		const _col=_row > 0 ? 1 : 0;
		return {
			rowspan:_row,
			colspan:_col,
		}
	}
}
filterData(arr){
	let spanOneArr=[];
	let conOne=0;
	arr.forEach((ITEM,I)=>{
		if(I === 0){
			spanOneArr.push(1)
		}else{
			if(item.minitorType === arr[I-1].minitorType){
			//第一列需要合并相同内容的判断
				spanOneArr[conOne]+=1;
				spanOneArr.push(0)
			}else{//不同
				spanOneArr.push(1)；
				conOne=I
			}
		}
	})
	return {
		one:spanOneArr,
	}
}

三：表格嵌套合并及数据格式

1:数据格式需要为双数组嵌套形式
栗子：
res:{
	data:{
		datalist{
		[
			{//第一行外层数据，对应后面的大格子
				objname:'第一行',
				wraplevel:'AAA',
				wrapnum:'10',
				wrapratio:'0.3',
				//innerList对应里面的小格子数据第234列
				innerList:[
					smalllevel:'AAA',
					smallnum:'10',
					smallratio:'0.3',
				]
			}，
		]
	}，
	code:'200',
	message:'查询成功！'
}

对应的dom部分

//table
  <el-table
    :data="datalist"
    border
    style="width: 100%">
    <el-table-column
      prop="objname"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="小级"
      width="180">
      《template slot-scope='innertemp'》
      		 <el-table
		    :data="innertemp.row.innerList"
		    :show-header='false'
		    >
		    		<el-table-column
			      	prop="smalllevel"
			      	label="小级">
			    	</el-table-column>
		    </el-table>
      </template>
    </el-table-column>
     <el-table-column
      prop="name"
      label="小级数量"
      width="180">
      《template slot-scope='innertemp'》
      		 <el-table
		    :data="innertemp.row.innerList"
		    :show-header='false'
		    >
		    		<el-table-column
			      	prop="smallnum"
			      	label="小级数量">
			    	</el-table-column>
		    </el-table>
      </template>
    </el-table-column>
     <el-table-column
      prop="smallratio"
      label="小级比例"
      width="180">
      《template slot-scope='innertemp'》
      		 <el-table
		    :data="innertemp.row.innerList"
		    :show-header='false'
		    >
		    		<el-table-column
			      	prop="smallratio"
			      	label="小级比例">
			    	</el-table-column>
		    </el-table>
      </template>
    </el-table-column>
    <el-table-column
      prop="wrapname"
      label="大级">
    </el-table-column>
    <el-table-column
      prop="wrapnum"
      label="大级数量">
    </el-table-column>
    <el-table-column
      prop="wrapratio"
      label="大级比例">
    </el-table-column>
  </el-table>