vue3使用elementPlus进行table合并处理

elementPlus中table合并部分列

虚拟数据中公司下有多个客户，公司一样的客户，公司列需要合并，客户如果一样也需要合并进行展示，效果展示

const tableData = ref([])自定定义自已想要的数据，一般都是通过接口拿到

//table
<template>
	<el-table
	  :data="tableData"
	  style="width: 80vw; margin-bottom: 20px"
	  :row-class-name="(({row}) => row.rowClass)"
	  border
	  :span-method="tableSpanMethod"
	>
		<el-table-column prop="company_name" label="公司" width="200"></el-table-column>
		<el-table-column prop="firm_name" label="客户名称"></el-table-column>
		<el-table-column prop="user_name" label="名称"></el-table-column>
		<el-table-column prop="biz_date" label="日期"></el-table-column>
		<el-table-column prop="" label="金额">
			<el-table-column prop="back_date" label="日期"></el-table-column>
			<el-table-column prop="back_status" label="已退"></el-table-column>
			<el-table-column prop="dc_money" label="金额(元)"></el-table-column>
		</el-table-column>
		<el-table-column prop="balance_money" label="余额(元)"></el-table-column>
	</el-table>
	
</template>

定义一个方法进行数据处理：

const getData = ()=>{
		let temp = [],
			companyRow,
			firmRow
		tableData.forEach((item,index)=>{
			temp.push(item)
			companyRow = !companyRow ? Object.assign(item, {companySpan: 0}) : companyRow
			companyRow.companySpan++
			firmRow = !firmRow ? Object.assign(item, {firmSpan: 0}) : firmRow
			firmRow.firmSpan++
			
			if(item.company_name != tableData[index + 1]?.company_name){
				companyRow = null
				firmRow = null
			}else{
				if(item.firm_name !== tableData[index+ 1]?.firm_name){
					firmRow = null
				}
			}
		})
	}

然后是tableSpan的方法定义：

const tableSpanMethod = ({row,column,rowIndex,columnIndex})=>{
		if(column.property ===  'company_name'){
			return row.companySpan ? [row.companySpan, 1] : [0,0]
		}
		if(column.property == 'firm_name'){
			return row.firmSpan ? [row.firmSpan, 1] : [0,0]
		}
	}